jQuery，在x秒后尝试删除一个隐藏的div？

Question

嗨，我在尝试让一个div元素“隐藏”，然后在隐藏动画结束后将其“删除”。似乎我只能让其中一个起作用，无法同时实现两个功能。我尝试过使用setTimeout，但这只会导致div元素被隐藏，而不是实际上被删除。

以下是代码：

$(this).parents("div:eq(0)").hide("fast");
setTimeout(function () { $(this).parents("div:eq(0)").remove();}, 1000);

如果我没有使用setTimeout进行删除，它会删除div，但不显示隐藏动画。

非常感谢您的帮助！

- TwstdElf

Answer 1

我认为这是一个作用域问题。当你的 setTimeout() 函数运行时，函数内部的 this 上下文与声明它时的上下文不同。

试试这个:

var self = $(this).parents("div:eq(0)");
self.hide("fast");
setTimeout(function () { self.remove();}, 1000);

- zombat

---

为什么.parents要执行两次？请记住，这将遍历所有父元素。 - redsquare

@redsquare - 好主意。当我写这个代码时，我只关注了作用域，而没有注意实际的选择器。我更新了它，使其更加高效。 - zombat

Answer 2

你尝试过这样的方法吗：

$(this).parents("div:eq(0)").hide("fast", function(){
    var div = this;
    setTimeout(function () { $(div).remove(); }, 1000);
});

当隐藏代码执行完毕时，将运行settimeout代码。

有关回调的更多信息，请参见此处：http://api.jquery.com/hide/

--已修复作用域问题this

- John Boker

Answer 3

大家好，感谢你们快速而出色的回复！非常感谢。

我最终采用了几种方法的结合，看起来效果很不错。

$(this).closest("div").hide("fast", function() {
    $(this).remove();
});

@John：谢谢你！我还是个新手，总是忘记回调函数（拍手在额头上！）

@redsqure：感谢您的效率提示！还在学习中...

@zombat：是的，发现得不错——在回调函数中删除了对父元素的调用，因为此时我正在删除父元素的父元素。 ;)

@Tim：.delay(1000)看起来很有前途，但我没能让它工作（？）（是的，我在使用1.4）;)

谢谢各位！ :)

- TwstdElf

Answer 4

.hide 接受一个完整的回调函数，您可以使用它。此外，.closest 比您当前使用的 parents first 更有效率。

var $div = $(this).closest('div');

$div.hide("fast", function(){
    $div.remove();
});

使用setTimeout，您可以这样做：

var $div = $(this).closest('div');

$div.hide("fast");

window.setTimeout(function () { 
      $div.remove();
}, 1000);

- redsquare