jquery为一个div设置动画，完成后，在第一个div中设置第二个div的动画

Question

例如，我在web上有一个标题（140px高），内容为5个"li"。其中的前3个（A，B，C）在".mouseover"时打开一个子标题（50像素高），其他2个（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");
        });
    });

直到这里一切都好了，现在问题来了。取决于悬停的是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：单击另一个Main，关闭子菜单，而不是suheader，然后打开新的子菜单

Answer 1

我必须说，我不得不多次阅读你的问题，我还不确定我是否理解正确，但这是你想要实现的吗？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;
            }
    });
});

我稍微调整了一下动画的风格，让它在我的jsfiddle上看起来更流畅，但我希望它能帮助你。

Answer 2

您有几个选项

.animate（）有一个完整的回调选项：

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

使用.cqueue（），类似于：

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 3

首先，我建议整理代码以提高可读性，并使其更易于使用。示例：

$("#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 4

Sooo这将是我迄今为止对平板电脑最好的解决方案：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) + '%'
                            });
                        });
                    });
                }
            }
        });
    });
});