动画完成时显示刷新按钮？答案

【问题标题】：Showing refresh button when animation is complete?动画完成时显示刷新按钮？
【发布时间】：2013-10-12 17:20:42
【问题描述】：

我想知道如何编写 jQuery 以在动画完成时显示隐藏按钮。 Button 必须刷新该动画，以便用户可以再次观看该动画。

在这里摆弄：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)
});

【问题讨论】：

标签： jquery css animation jquery-animate

【解决方案1】：

你可以添加完整的功能

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

【讨论】：

【解决方案2】：

你可以使用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.

【讨论】：

【解决方案3】：

使用.animate()提供的完整回调

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

演示：Fiddle

【讨论】：