我怎样才能动画多种元素按顺序使用jQuery？ [英] How can I animate multiple elements sequentially using jQuery?

问题描述

我认为这将是简单，但我仍然无法得到它的工作。通过点击一个按钮，我想几个动画发生 - 一前一后 - 但现在所有的动画都发生一次。这里是我的code - 有人可以告诉我，我要去哪里错了？

  $（按钮）。点击（函数（）{
  $（＃头），动画（{顶：-50}，慢）。
  $（＃东西），动画（{高度：隐藏}，慢）
  $（＃UL菜单），动画（{顶：20，左：0}，慢）
  $（触发），动画（{高度：秀，上面：110，左：0}，慢）;
}）;
 

解决方案

您可以做一大堆的回调。

  $（按钮）。点击（函数（）{
    $（＃头），动画（{顶：-50}，慢，函数（）{
        $（＃东西），动画（{高度：隐藏}，慢，函数（）{
            $（＃UL菜单），动画（{顶：20，左：0}，慢，函数（）{
                $（触发），动画（{高度：秀，上面：110，左：0}，慢）;
            }）;
        }）;
    }）;
}）;
 

I thought it would be simple but I still can't get it to work. By clicking one button, I want several animations to happen - one after the other - but now all the animations are happening at once. Here's my code - can someone please tell me where I'm going wrong?:

$(".button").click(function(){
  $("#header").animate({top: "-50"}, "slow")
  $("#something").animate({height: "hide"}, "slow")
  $("ul#menu").animate({top: "20", left: "0"}, "slow")
  $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");
});

解决方案

You could do a bunch of callbacks.

$(".button").click(function(){
    $("#header").animate({top: "-50"}, "slow", function() {
        $("#something").animate({height: "hide"}, "slow", function() {
            $("ul#menu").animate({top: "20", left: "0"}, "slow", function() {
                $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");        
            });
        });
    });
});

这篇关于我怎样才能动画多种元素按顺序使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！