jquery - 另一个完成时激活 div

Question

我想要实现的是，当我按下按钮时，会出现一条垂直线，从一点开始，在（随机）px 之后结束。那是有效的。

当该事件完成后，我希望在其下方出现一个圆圈，它有点工作，只是当我按下按钮时圆圈出现，而不是在垂直线完全加载时出现。

为了澄清起见，我希望在垂直线位于其末端时出现圆圈。谢谢！

$(document).ready(function(){
$('.name-box').click(function(){
    $('.verti-line').animate({ height: '220px' }, 2000 );
    $('.circle').show();
});

});

最好的问候，维克多！

Answer 1

$('.name-box').click(function(){
    $('.verti-line').animate({ height: '220px' }, 2000, function(){
        $('.circle').show();
    });
});

您可以将函数作为参数传递以用作回调。这将在动画完成时运行 circle show 方法。

Answer 2

动画有一个complete功能。要调用它，您只需要这样写：

$('.verti-line').animate({ height: '220px' }, {duration : 2000, complete : function(){$('.circle').show();}});

动画完成后，圆圈会显示出来！

Answer 3

来自动画的 jQuery 文档，http://api.jquery.com/animate/。所以是这样的：

$(document).ready(function(){
$('.name-box').click(function(){
    $('.verti-line').animate({ height: '220px' }, 2000, function() {
        $('.circle').show();
    });
});