使用jQuery如何使div文本在5秒后消失？

Question

我需要在显示一个div文本后的x秒钟内让它消失，并使用ajax调用实现。

能否请你帮忙解决这个问题呢？

谢谢。

- EzzDev

Answer 1

您可以使用 empty() 方法来清空一个 <div> 中的内容：

setTimeout(fade_out, 5000);

function fade_out() {
  $("#mydiv").fadeOut().empty();
}

假设：

<div id="mydiv">
  ...
</div>

如果你愿意，你可以使用匿名函数来实现这个功能：

setTimeout(function() {
  $("#mydiv").fadeOut().empty();
}, 5000);

或者甚至：

var fade_out = function() {
  $("#mydiv").fadeOut().empty();
}

setTimeout(fade_out, 5000);

有时人们更喜欢使用后者，因为它对全局命名空间的污染较少。

- cletus

---

工作正常，但我无法再次调用那个div..我需要删除div内容文本，同时保留div本身以供新的使用...谢谢。 - EzzDev

然后删除对empty()的调用，直接执行fadeOut()。 - Bert Lamb

谢谢，这非常有用。 - Dibish

我想将这个Mydiv应用到多个Div上，但它不能与其他Div一起工作，只能一次影响一个Div。有什么解决方案吗？ - always-a-learner

Answer 2

你可以尝试使用.delay()。

$(".formSentMsg").delay(3200).fadeOut(300);

调用 div，设置延迟时间（以毫秒为单位），并设置要更改的属性，例如此处使用了 .fadeOut() 进行动画效果，也可以使用 .hide()。

http://api.jquery.com/delay/

- Nagama Inamdar

Answer 3

$.doTimeout( 5000, function(){ 

 // hide the div
}); 

- jball

Answer 4

你可能需要在div文本消失后再次显示它。这可以用一行代码完成。

$('#div_id').empty().show().html(message).delay(3000).fadeOut(300);

- Cris

Answer 5

这应该可以工作：

$(document).ready(function() { 
    $.doTimeout(5000, function() { 
        $('#mydiv').fadeOut(); 
    }); 
});

- Sander Rijken

---

$.doTimeout是什么意思？它是插件还是核心的一部分？ - ScottE

请参见http://benalman.com/projects/jquery-dotimeout-plugin/，在这种情况下，我只会使用window.setTimeout，不值得为这么简单的事情使用插件。 - Sander Rijken

Answer 6

你需要设置类似于setTimeout('$("#id").fadeOut("slow")', 5000)这样的东西，但除此之外，它还取决于你的代码的其余部分是什么样子的。

- Jarrett Widman

Answer 7

这个答案是 没有 jQuery 的，你可以直接获取你的 element 并知道它的 index 位置。

然后在下面的 div 中使用它。我将是您 div 在 dom 中的索引号。

    const div = document.querySelectorAll('div');
    setTimeout(() => {
        div[i].textContent = '';
    }, 3000);

- Safi Siddiqui