Question

我试图用jQuery从页面中删除一个对象。我也想动画删除。目标是使元素fadeOut（），等待一秒，然后删除（）。但它似乎拒绝等待删除元素，即使我在setTimeout（）函数中使用它。如何创建元素fadeOut（），然后删除（）它？

$("button").click(function() {
    $(this).fadeOut();
    setTimeout(function() { $(this).remove();}, 1000);
});

Answer 1

仔细阅读手册： http://api.jquery.com/fadeOut/

fadeOut（）方法有一个在fadeOut完成后调用的回调。使用它：

$("button").click(function() {
    $(this).fadeOut(function() { $(this).remove();});
});

在删除元素之前，没有理由在fadeOut完成后等待一秒，因为元素在删除时将不可见。

Answer 2

在你的超时功能中，this不是你想象的那样 - 它实际上是全局window对象。

无论如何（没有双关语意）你应该使用“完成回调”：

$("button").click(function() {
    $(this).fadeOut('slow', function() {
        $(this).remove();
    });
});

永远不要混淆setTimeout和动画队列。它可以交错两者，即完成回调启动计时器，或者让计时器启动动画，但是假设你可以同时启动1000ms动画和1000ms计时器，让它们同时完成。

编辑修复了代码 - 在完成回调时无需self，我写这篇文章时仍然在考虑setTimeout和this！

Answer 3

$('button').click(function(){
    $(this).fadeOut(function(){$(this).remove()});
});

DEMO

Answer 4

为什么不使用fadeout的回调？

$("button").click(function() {
    $(this).fadeOut(function(){$(this).remove();});
});

Answer 5

尝试这个，也许有帮助：

$("button").click(function() {
    (function(that) {
        that.fadeOut();
        setTimeout(function() {
            that.remove();
        }, 1000);
    })($(this));
});

在jQuery中删除元素的问题

5 个答案: