jQuery為一個div設置動畫，完成后，為第一個div中的第二個div動畫

Question

例如，我在網上有5個“ li”內容的標頭（高度為140px）。 當“ .mouseover”時，前三個（A，B，C）打開一個子標題（50px高度），其他兩個（D，E）則關閉所有開頭。

jq(document).ready(function(){
        jq("#A a,#B a,#C a").mouseover(function(){
            jq("#subheader").animate({top:"140px"},"normal");
        });

        jq("#D a,#E a").mouseover(function(){
            jq("#subheader").animate({top:"91px"},"normal");
        });
    });

到這里一切都OK，現在問題來了。 取決於在哪個A，B或C上懸停，就必須在動畫結束時對子標題進行不同的處理。 （在子標題內打開.smenus）

        jq("#A a").mouseover(function(){
            jq(".smenu1").slideDown("slow");
            jq(".smenu1 ul").animate({margin:"0px auto"},"slow");
            jq(".smenu1 li").animate({padding:"0 30px 0"},"slow");

        });
        jq("#B a").mouseover(function(){
            jq(".smenu2").slideDown("slow");
            jq(".smenu2 ul").animate({margin:"0px auto"},"slow");
            jq(".smenu2 li").animate({padding:"0 30px 0"},"slow");

        });
        jq("#C a").mouseover(function(){
            jq(".smenu3").slideDown("slow");
            jq(".smenu3 ul").animate({margin:"0px auto"},"slow");
            jq(".smenu3 li").animate({padding:"0 30px 0"},"slow");

        });

我認為這行不通，因為它在完成suheader的打開之前就開始加載。 所以當開幕結束時我必須做這個動畫。

PD：還有另一件事，例如當#A懸停在#B上時，它必須停止動畫（如果尚未完成，或者只是回調），刪除其他子菜單（在這種情況下為.smenu1）並替換它和他們的子菜單（在本例中為.smenu2）。 #D和#E必須做同樣的事情，將一切重新開始。

編輯：

多虧了西蒙（Simon），我對此有所了解： http : //jsfiddle.net/PAXqB/4/

最后一種實現是使用.click（）而不是.mouseover（）來實現，這有以下3種情況：

• 情況1：與鼠標懸停相同，全部打開。
• 情況2：再次單擊同一Main，所有操作都必須像我的示例一樣關閉。
• 情況3：單擊另一個主菜單，關閉子菜單，而不是suheader，然后打開新的子菜單。

Answer 1

您有幾種選擇

.animate（）具有完整的回調選項：

jq(".smenu2 ul").animate({margin:"0px auto"},"slow", function() {
   // code here is executed after this animation is complete
});

使用.queue（） ，類似於：

jq(".smenu2").slideDown("slow");     
jq(".smenu2").queue(function () {
  jq(".smenu2 ul").animate({margin:"0px auto"},"slow");
  jq(this).dequeue();
});
jq(".smenu2 li").animate({padding:"0 30px 0"},"slow");

這個簡單的隊列動畫請求並按順序執行

Answer 2

首先，我建議您整理代碼以提高可讀性，並使其更易於使用。 例：

$("#A a, #B a, #C a").on('mouseover', function(){
            $menu = $(this).find(".menu");
            $menu.slideDown("slow");
            $menu.find("ul").animate({margin:"0px auto"},"slow");
            $menu.find("li").animate({padding:"0 30px 0"},"slow");
        }).on('mouseout', function(){
            $(this).find(".menu").stop(true, true);
});

尚未經過全面測試，但是就使代碼正常工作而言，這應該是正確的做法-.stop（）方法是答案的第二部分。

Answer 3

我必須說我不得不多次閱讀您的問題，但我不確定我是否理解正確，但這就是您想要實現的目標嗎？ http://jsfiddle.net/PAXqB/

$(document).ready( function() {
    $('ul.main > li').bind('mouseover mouseout', function(e) {
        var t = $(this), i = t.index(), sub = t.find('.sub');
        if(i < 3)
            switch(e.type) {
                case 'mouseover':
                    sub.stop(true).slideDown( function() {
                        $(this)
                            .stop(true)
                            .animate({ margin:"20px 0 0" })
                            .find('li')
                            .stop(true)
                            .animate({ padding:"0 10px 0" });
                    });
                    break;
                case 'mouseout':
                    sub.stop(true).slideUp('fast', function() {
                        $(this)
                            .removeAttr('style')
                            .find('li')
                            .removeAttr('style');
                    });
                    break;
            }
    });
});

我對animate-to樣式進行了些微調整，以使其在我的jsfiddle上看起來更平滑，但我希望它對您有所幫助。

Answer 4

所以，到目前為止，這將是我迄今為止在平板電腦上最好的解決方案： jsfiddle我正在開發一個版本，該版本的功能完全符合您的要求（如果看不見任何東西或單擊的項目處於活動狀態，則容器會向下/向上滑動），但是有一些動畫atm遇到麻煩。

$(document).ready( function() {

    var active = 'active';

    $('ul.main > li').bind('click', function() {

        var t = $(this),
            i = t.index(),
            c = $('.sub-container'),
            sub = $( $('.sub').get(i) ),
            isActive = t.hasClass(active),
            li = sub.find('li'),
            liCount = li.length;

        c.slideUp('fast', function() {
            c.find('*').removeAttr('style');
            t.siblings().removeClass(active);
            if(i < 3) {
                if(isActive) t.removeClass(active);
                else {
                    t.addClass(active);
                    c.slideDown( function() {
                        sub.slideDown( function() {
                            li.animate({
                                width: (100 / liCount) + '%'
                            });
                        });
                    });
                }
            }
        });

    });

});