jquery - 动画完成后应用css规则jquery

Question

我希望能够使用 jquery 添加一个 css 属性\值，但我想等到首先制作动画然后我希望 css 通过将其显示值设置为无来删除动画。

这是我的代码片段。

**Jquery**
 $(".filled-rectangle").animate(); 
 $(".filled-rectangle").css('display', 'none'); 

Answer 1

您可以使用.promise()和 .done() 方法在当前动画队列的末尾添加操作：

$(".filled-rectangle").animate().promise().done(function() {
    $(".filled-rectangle").css('display', 'none');
});

如果您希望允许其他代码添加在动画完成后调用的回调，这将非常有用，因为您可以返回 .promise() 方法返回的承诺。

或者，您可以使用.queue()将回调添加到动画队列本身：

$(".filled-rectangle").animate().queue(function(next) {
    $(".filled-rectangle").css('display', 'none');
    next();
});