動畫完成時顯示刷新按鈕？

Question

我想知道如何編寫jQuery以在動畫完成時顯示隱藏按鈕。按鈕必須刷新該動畫，以便用戶可以再次觀看動畫。

小提琴這裏：http://jsfiddle.net/rabelais/ZeMcP/

HTML

<div class="bar1"><div class="alt0"></div></div> 

<div id="button"><a href="#">refresh</a></div> 

CSS

.bar1 { 
width: 200px; 
height: 20px; 
background-color: black; 
} 
.alt0 { 
width: 0px; 
height: 20px; 
background-color: orange; 
} 
#button { 
display: none; 
} 

jQuery的

$('.bar1').mouseenter(function(){ 
$('.alt0').animate({width: "200px"}, 1000) 
}); 

Answer 1

使用由.animate()

$('.bar1').mouseenter(function() { 
    $('.alt0').animate({ 
     width: "200px" 
    }, 1000, function(){ 
     $('#button').show(); 
    }) 
}); 
$('#button').click(function(){ 
    $('.alt0').width(0); 
}) 

演示提供了完備的回調：Fiddle

Answer 2

您可以添加功能齊全

$('.bar1').mouseenter(function() { 
    $('.alt0').animate({ 
     width: "200px", 
     complete: function() { 
      $("#button").toggle(); 
     } 
    }, 1000) 
}); 

Answer 3

您可以使用callback：$(selector).animate({params},speed,callback);

這樣的：

$('.bar1').mouseenter(function(){ 
    $('.alt0').animate({width: "200px"}, 1000,function(){ 
     $("#button").css("display","block"); 
     }) 
}); 
$("#button").click(function(){ 
        $("#button").css("display","none"); 
$(".alt0").css("width","0px"); 
        }); 

jsFiddle is here.