jquery - 回调中的jQuery动画不起作用

Question

好的，所以我想为在我的网页上行走的脚印制作动画。

我淡入一只脚，然后是另一只，然后淡出第一只脚，然后淡入第三只，依此类推。但是，在我的第二个嵌套回调中（我想淡出第一个足迹）动画函数（我尝试过 .fadeIn() 和 .animate() ）将不起作用，而 .hide() 确实起作用。怎么来的？

http://jsfiddle.net/YEfJR/9/

这是代码的简化版本：

HTML

<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>

CSS

#one, #two, #three {
    width: 100px; 
    height: 100px; 
    position: fixed; 
    display: none; 
    background: #af0;
}

jQuery

$("#start").click( function(){ 
    $g1x = 0;
    $g1y = 0;
    $g2x = 100;
    $g2y = 100;

    $("#one").css({"bottom": $g1y+"px", "left": $g1x+"px"}).fadeIn(1000).delay(1000, function() {
        $("#two").css({"bottom": $g2y+"px", "left": $g2x+"px"}).fadeIn(1000).delay(1000, function() {
             $("#one").fadeOut(1000);
        });
    });
});

任何帮助将非常感激！

Answer 1

将完整的回调作为第二个参数传递给.fadeIn()

$("#start").click( function(){ 
    $g1x = 0;
    $g1y = 0;
    $g2x = 100;
    $g2y = 100;

    $("#one").css({"bottom": $g1y+"px", "left": $g1x+"px"}).fadeIn(1000, function() {
        $("#two").css({"bottom": $g2y+"px", "left": $g2x+"px"}).fadeIn(1000, function() {
             $("#one").fadeOut(1000);
        });
    });
});