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

例如，我在web上有一个标题（140px高度），内容为5“li”。当“.mouseover”时，其中的前3个（A、B、C）打开一个副标题（50px高度），其他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的悬停位置，必须在动画结束时对副标题执行不同的操作。（未清。斯梅努斯内分目）

我认为这是行不通的，因为它在打开suheader之前就开始加载了。所以我必须在开幕式结束后制作这个动画

PD：现在还有一件事，例如A悬停，然后B，它必须停止动画（如果没有完成，或者只是回调），删除其他子菜单（在本例中为.smenu1），并将其替换为他们的子菜单（在本例中为.smenu2）#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");
        });
    });

编辑：

多亏了西蒙，我或多或少地做到了这一点：

最后一个实现是使用.click（）实现，而不是使用具有以下3种情况的.mouseover（）：

• 案例1：与鼠标盖相同，全部打开
• 案例2：再次单击相同的主节点，所有节点都必须关闭，就像我的示例一样
• 案例3：单击另一个主菜单，关闭子菜单，而不是suheader，然后打开新的子菜单

---

您有两种选择
具有完整的回调选项：

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

使用，例如：

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");

---

这很简单，可以将动画请求排队并按顺序执行。首先，我建议整理代码以提高可读性，并使其更易于使用。例如：

$("#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（）方法。
我必须说我已经多次阅读了你的问题，我还不确定我是否理解正确，但这是你想要实现的吗

$（文档）.ready（函数（）{
$（'ul.main>li'）.bind（'mouseover mouseout'，函数（e）{
var t=$（this），i=t.index（），sub=t.find（'.sub'）；
如果（i<3）
开关（e型）{
案例“鼠标悬停”：
sub.stop（true）.slideDown（函数（）{
$（本）
.停止（正确）
.animate（{margin:“20px 0”}）
.find（'li'））
.停止（正确）
.animate（{填充：“0 10px 0”}）；
});
打破
“鼠标出”一案：
sub.stop（true）.slideUp（'fast'，function（）{
$（本）
.removeAttr（'style'））
.find（'li'））
.removeAttr（“风格”）；
});
打破
}
});
});

---

我稍微调整了动画的样式，使它在我的JSFIDLE上看起来更平滑，但我希望它能帮助您。
所以这将是迄今为止我对平板电脑的最佳解决方案： 我正在开发一个版本，在这个版本中，它的行为完全符合您的需要（如果看不到任何内容或单击的项目处于活动状态，则容器只会向下/向上滑动），但在动画方面有一些问题

$(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) + '%'
                            });
                        });
                    });
                }
            }
        });

    });

});

$（文档）.ready（函数（）{
var active=‘active’；
$（'ul.main>li'）.bind（'click'，function（）{
var t=$（此），
i=t.索引（），
c=$（“.子容器”），
sub=$（$（'.sub'）.get（i）），
isActive=t.hasClass（活动），
li=子项find（'li'），
liCount=li.长度；
c、 slideUp（'fast'，function（）{
c、 查找（“*”）.removeAttr（'style'）；
t、 同级（）.removeClass（活动）；
如果（i<3）{
如果（激活）t.removeClass（激活）；
否则{
t、 addClass（活动）；
c、 向下滑动（函数（）{
sub.slideDown（函数（）{
动画({
宽度：（100/L计数）+'%
});
});
});
}
}
});
});
});

我推荐ManseUK的排队答案，而不是.stop。很好的建议，“.menu”（在我的例子中是.smenuX）是subheader div中的一个菜单，完全在标题a、B和C之外，我认为find（）将找不到它。所有这些都可能对子菜单有好处，但它仍然会导致子标题的打开和关闭出现问题，也许队列就是解决方案。您不能将名为“menu”的类添加到所有子项或“menuInternal”等吗？在所有子项上相似的类，而不是名称不同的类。然后你可以很容易地使用这种方法。所以我制作动画来降低副标题，然后我制作if和elseif，取决于A、B或C的选择？全部收回？。当我转到另一个字母，或D和E时，我如何能准确地反转回去，使所有内容恢复到开头，包括向上滑动副标题。@IgnacioBustos我的回答是给你一些如何阻止动画同时发生的想法-这不是最终的解决方案。。。我建议您创建动画队列，并在需要时执行它们。是的，与您的代码大致相同，问题是header Main是一个不同的div，没有子菜单，而div subheader是另一个菜单，我称之为Submenu。我会马上更改ir代码，如果可以的话。就是这样，我更改了它：它工作得非常好，有一些错误，但是用鼠标盖进行了重新分配。现在，如果你仍然可以帮助我，我必须将其修改为“.”。单击“有3个案例：-案例1：与鼠标悬停相同，全部打开-案例2：我再次单击同一个主节点，所有节点都必须关闭，就像我的示例一样-案例3：我单击另一个主关闭子菜单，而不是suheader，然后

$(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) + '%'
                            });
                        });
                    });
                }
            }
        });

    });

});