jQuery淡出DIV在特定时间后隐藏

Question

我有以下代码，想要在页面加载后指定一段时间（例如5秒）后隐藏一个DIV（.video-field-new）。这可行吗？

<div id="BodyField">
    <div class="video-field-new"></div>
</div>

如果我能让它渐隐而不是突然消失，那就更好了，因为用户会看到这一过程。

- Dan

---

我不确定我理解你的问题。你尝试过什么？什么？ - Denys Séguret

可能是使用jQuery在x秒后淡出div的重复问题。 - Wesley Murch

Answer 1

你可以用这种方式做到

$("#BodyField").delay(5000).fadeOut();

- Starx

---

非常干净的解决方案。我喜欢它。谢谢。 - Uresh K

Answer 2

$(window).load(function(){
  setTimeout(function(){ $('.video-field-new').fadeOut() }, 5000);
});

- Denys Séguret

---

虽然Starx的回答简短易懂，但它并没有特别关注OP所问的“页面加载”，因此两个回答都+1。 - David Bridge

Answer 3

尝试

$('#div').fadeIn('fast').delay(1000).fadeOut('fast');
$('#div-inner').fadeIn('slow').delay(1000).hide(0);

谢谢

- subindas pm

Answer 4

你也可以像这样做

$(document).ready(function(){
    $('.video-field-new').fadeOut(5000)
})

$(selector).fadeOut(speed,easing,callback)

参数 | 描述

---

speed = 可选项。指定淡入淡出效果的速度。默认值为400毫秒

可能的取值：

• 毫秒
• "slow"（慢）
• "fast"（快）

---

easing = 可选项。指定动画元素在不同点的速度。默认值为“swing”

可能的取值：

• “swing” - 开始/结束时移动较慢，但中间移动较快
• “linear” - 以恒定速度移动

---

callback = 可选项。在fadeOut()方法完成后要执行的函数。

---

欲了解更多信息，请查看此文档https://www.w3schools.com/jquery/eff_fadeout.asp

- Ankit Tiwari

Answer 5

我们甚至可以这样做： 在HTML中

    <div id="BodyField">
        <div class="video-field-new">
      <p>This is your DIV with text which will fade Out after delay 5s using jQuery</p>
      <p>This is your DIV with text which will fade Out after delay 5s using jQuery</p>
      <p>This is your DIV with text which will fade Out after delay 5s using jQuery</p>
      <p>This is your DIV with text which will fade Out after delay 5s using jQuery</p>

    </div>
</div>

in js:

$(function() {
    $('.video-field-new').delay(5000).show().fadeOut('slow');
});

CSS中：

div { 
    width:200px; 
    height:80px; 
    float:left; }

点击链接查看演示 https://jsfiddle.net/kingtaherkings/133v70se/

- imtaher