Question

jquery 多个元素按顺序执行同一动画

要让一组li依次执行同一个动画，应该怎么写？比如执行依次执行动画$("li").animate({fontSize:"24px"},500)，这样写是同时执行了
不是一个元素执行多个动画，这个用动画队列，我知道。

Answer 1

$(function(){
function sA(s,a,t){
s.animate(a,t || "normal",function(){
if(s.next().length){
sA(s.next(),a,t);
}
});
}

var test = $("#fc_js_control>li");
var testA = {"width":0};

sA(test.eq(0),testA,3000);
});

那函数就是你要的，用法参考下面的例句

追问

对了，这个就是，如果要在执行下一个li的动画的时候，要把上一个li执行完的动画效果清除掉，该怎么实现呢？还有就是这一组元素要重复循环执行

追答

清除上一个，不是很明白？

//s是对象，a是要执行的动画，ra是回复的动画，t是动画时间，n是执行次数（默认无限次）
//前三个参数一定要设置。。。
//最后一个参数不要设置
function sA(s, a, ra, t, n, ba) {
if (!ba) {
var ba = s;
}
s.animate(a, t || "normal", function() {
s.animate(ra, t || "normal");
if (s.next().length) {
sA(s.next(), a, ra, t, n, ba);
} else {
if (n === 0) {
return false;
}

if (typeof n != "number") {
n = "forever";
} else {
n--;
}

if (n || n == "forever") {

sA(ba, a, ra, t, n, ba);
}
}
});
}

举例调用：
sA($("#side dd").eq(0), {"opacity": 0}, {"opacity": 1},"slow",5);
调用$("#side dd").eq(0)执行{"opacity": 0}动画后再执行 {"opacity": 1}，动画速度设为slow，重复执行5次

Answer 2

queue( 函数) 方法 添加动画队列
$(this).dequeue() 移除队列

追问

能不能写个例子看下？

追答

html>

.div1{ width:300px; height:100px; position:absolute; background-color:#000;}

$(function () {
var node = $(".div1");
node.animate({ left: 300 }, "slow");
node.queue(function () {

$(this).animate({ top: 100 }, "slow");
$(this).dequeue()
});
});

追问

你这个还是进入到我的问题补充中了，一个元素执行多个不同的动画。。这个用动画队列，我明白。。我的问题是多个元素 依次 执行 同一个 动画。

追答

哦

.div1,.div2{ width:300px; height:100px; position:absolute; background-color:#000;}
.div2{ top:150px;"}

$(function () {
var node = $("div");
node.eq(0).animate({ left: 300 }, "slow", function () {
$("div").eq(1).animate({ left: 300 }, "slow");
})
});

那这样就行了
怎么执行多个你递归就行了

Answer 3

楼主你，你可以参考下jquery的$("li").each(function(){})的方法

$("li").each(function(){
$(this).animate({fontSize:"24px"},500)，
})

追问

这个方法也不行，each完后还是同时执行了动画，我需要看到他们按顺序执行的效果。

Answer 4

function an(index){
$("li:eq("+index+")").animate({left:100},500,"",function(){
an(index+1)
})
};
an(0);
你看看有没有思路？

追问

可能我没说清楚，我需要循环执行。。每次循环还要看到按顺序的效果