Question

新手提问 jquery 函数执行顺序的问题

$(document).ready(function () {

$("#pic img:eq(0)").animate({left:'-400px'},3000);
$("#pic img:eq(1)").animate({left:'-400px'},3000)
$("#pic img:eq(2)").animate({left:'-400px'},3000)
$("#pic img:eq(3)").animate({left:'-400px'},3000)
});
这段代码我自己运行时，4个图片是同时运动的，不过我看网上的教程好像不是这样的：
jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
实例 1
隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

这四个是先后执行的，不知道为什么，，，，求助

Answer 1

你好！！

当以回调的形式应用动画方式时,动画是按照回调顺序发生的。

可以写个函数，来实现这个功能···

$(document).ready(function () {
       //obj为执行动画的元素,opt为执行的动画,time为时间
       function yourAnimate(obj,opt,time){
              obj.animate(opt,time || "normal",function(){
                    //在动画的回调函数中判断是否存在下一个元素,有则继续执行动画
                    if(obj.next().length){
                        yourAnimate(obj.next(),opt,time);
                    }
              });
       }
       
       //调用: 只要在img的第一个元素上执行就好了
       yourAnimate($("#pic img:eq(0)"), {left:'-400px'}, 3000);
});

上面的方法，可以实现你想要的顺序执行动画的功能，但是没有考虑，当元素中的动画有不同变化的情况(可以自己扩展一下)。

最后说一下，例子中的动画顺序执行是在一个元素上编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。

希望对你有帮助！！

追问

那如果是在不同元素上编写animate，就像我的第一段代码那样，究竟是按照什么顺序来及执行的呢，我就是这点搞不懂

追答

你的第一段代码，它们是同时执行··

Answer 2

实例1 div是同一个元素，这个animate动画都是针对一个元素操作，所以看起来是队列操作哦。
希望能帮到您!

追问

确切的说，我是想问怎么让针对不同元素语句先后的执行而不是同时执行

追答

animate() 方法有有个完成事件，你再第一个完成时调用第二个事件执行。事件嵌套这样应该没问题！