Jquery Accordion / Scrollto, но нужен Fade in and out? - PullRequest
0 голосов
/ 22 апреля 2011

Я графический дизайнер, но не очень разбираюсь в вебе, когда дело доходит до jquery!В настоящее время это моя дилемма;У меня есть ряд ссылок, которые я хочу открыть в аккордеоне и отображать изображения в последовательном списке, где прокручивается, чтобы перейти к ссылке, по которой щелкают, и исчезать и исчезать при нажатии на ссылки, это то, что я обнаружил, что делает это, кроме исчезновения: http://jsfiddle.net/Jaybles/6EWAF/

и вот ссылка, показывающая постепенное появление и исчезновение меня после того же аккордеона, я просто хочу объединить эти два стиля!http://nekudacom.com/martimi/flash.html#

Ссылка - это JSFiddle, предоставленная Dutchie432, если кто-нибудь может помочь мне реализовать оба этих варианта вместе или лучший способ использования соединения аккордеона со scrollto и затуханием был бы замечательным!

Вот мой HTML

<dt><a href="#"><h3><span class="redtext">/</span> yaya Photography</h3></a></dt>

<dd style="display: none; opacity: 0;" class="closed"> 

<ul>
   <li> <img src="images/yaya_spacing_white.png" alt="yaya_spacing_white" width="600" height="406" /></li>
    <li><img src="images/yayaspacing_black.png" alt="yayaspacing_black" width="600" height="406" /></li>
    <li><img src="images/yaya_logo.png" alt="yaya_logo" width="601" height="401" /></li>
    <li><img src="images/yaya_typography.png" alt="yaya_typography" width="600" height="402" /></li>
    <li><img src="images/yaya_business_colors.png" alt="yaya_business_colors" width="600" height="403" /></li>
    <li><img src="images/yaya_buscab.png" alt="yaya_buscab" width="600" height="600" /></li>
    <li><img src="images/yaya_papers.png" alt="yaya_papers" width="600" height="400" /></li>
    <li><img src="images/yaya_usb.png" alt="yaya_usb" width="600" height="400" /></li>
    <li><img src="images/yaya_website.png" alt="yaya_website" width="600" height="359" /></li>
    <li><img src="images/yaya_website_home.png" alt="yaya_website_home" width="600" height="360" /></li>
    <li><img src="images/yaya_website_contact.png" alt="yaya_website_contact" width="600" height="360" /></li>
    <li><img src="images/yaya_website_gallery.png" alt="yaya_website_gallery" width="600" height="360" /></li>
    <li><img src="images/yaya_shirts1.jpg" alt="yaya_shirts1" width="600" height="400" /></li>
    </ul>

</dd>

Вот скрипт jquery

    $(document).ready(function(){
    $("dd:not(dd.open)").hide();
    $("dt a").click(function(){
        if ($("dd:not:visible") .get()[0] !== $(this).parent().next().get()[0]) {           
            $("dd").fadeTo("fast", 0);
            $("dd:visible").slideUp("slow");
            $(this).parent().next().slideDown("def");
            $(this).parent().next().fadeTo("def", 1);
        }
        return true;
    });

1 Ответ

0 голосов
/ 22 апреля 2011

Используйте change: function(event, ui) { ...} или changestart: function(event, ui) { ...} чтобы определить, что происходит, когда вы открываете гармошку. ui.newContent` - это объект jQuery с недавно открытым элементом содержимого.
См. Полную документацию здесь (вкладка событий)

...