jQuery:empty()方法可以给持续时间吗？

Question

在jQuery中,是否可以给empty()方法一个持续时间,使得对象在一段时间内淡化为空(例如,500毫秒)？

这是当前的代码:

$('#object_to_be_emptied').empty();

Answer 1

不.淡出内容,然后在淡入淡出完成时将其清空.

$('#object_to_be_emptied').children().fadeOut(500, function() {
    $('#object_to_be_emptied').empty();
});

不幸的empty是,这段代码调用的次数与下面的元素一样多#object_to_be_emptied.如果你使用的是jQuery> 1.6,你可以通过$.Deferred对动画的支持来解决这个问题:

$('#object_to_be_emptied').children().fadeOut(500).promise().then(function() {
    $('#object_to_be_emptied').empty();
});

Answer 2

其他两个答案建议使用，但实际上使用它是一个坏主意，因为这会导致动画应用于包含元素中的每个子元素（降低性能），因此为每个子元素执行一次动画完成回调内的元素。不仅仅是几个元素，这将变成一个真正的问题。$('#object_to_be_emptied').children().fadeOut().children()object_to_be_emptied

相反，只需将动画应用于包含元素，记住.fadeIn()在重新填充它并希望再次显示它后调用。

$('#object_to_be_emptied').fadeOut(500, function() {
    $(this).empty();
});

还要注意，我this在回调函数中使用了 – jQuery 设置this为 DOM 元素，它是回调函数的目标；在这种情况下，object_to_be_emptied。使用this可以节省一些输入并使代码更容易更改。