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

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

Answer 3

使用.animate()

提供的完整回调

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

演示：Fiddle

动画完成后显示刷新按钮？

3 个答案: