jquery - コールバックの jQuery アニメーションが機能しない

Question

さて、私のウェブページを歩く足跡をアニメーション化したいと思います。

片方の足をフェード インし、次にもう一方の足をフェード アウトし、最初の足をフェード アウトして、3 番目の足をフェード インします。ただし、2 番目のネストされたコールバック (最初のフットプリントをフェードアウトしたい場所) では、アニメーション関数 (.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()の 2 番目の引数として渡します

$("#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);
        });
    });
});