jquery - 动画完成时显示刷新按钮？

Question

我想知道如何编写 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)
});

Answer 1

您可以添加完整的功能

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

Answer 2

你可以使用回调：$(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 在这里。

Answer 3

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

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

演示：小提琴