콜백의 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); 
     }); 
    }); 
});