使用jQuery在x秒后淡出div

Question

我在页面加载时对一个不可见的div执行淡入效果：

    $('#overlay').fadeIn('fast');
    $('#box').fadeIn('slow');

在x秒后，我会执行这些指示，将div进行淡出处理：

$('#overlay').fadeOut('fast');
$('#box').hide();

我该怎么做？ 实际上，淡出是在按钮单击时完成的。

脚本在这里：http://clouderize.it/cookie-localstorage/a.php 当我点击另一张图片时出现的div将在x秒后消失。 非常感谢。

- michele

Answer 1

.delay 方法是专门为你所描述的场景而设计的。

$('#overlay').fadeIn('fast').delay(1000).fadeOut('fast');
$('#box').fadeIn('slow').delay(1000).hide(0);

http://jsfiddle.net/SUBnz/1/

- Asad Saeeduddin

Answer 2

您可以使用 setTimeout()。

var xSeconds = 1000; // 1 second

setTimeout(function() {
   $('#overlay').fadeOut('fast');
   $('#box').hide();
}, xSeconds);

- Gabe

---

@michele，您能描述一下出了什么问题吗？这种方法在这里可以看到效果：http://jsfiddle.net/SUBnz/ - Asad Saeeduddin

Answer 3

也许回复有点晚了，但我找到了一个方法可以帮助我。 $("#overlay").fadeTo(10000,1).fadeOut(5000);

参考这个链接 http://juristr.com/blog/2009/12/howto-fade-out-div-after-some-seconds/ 它允许您设置一个时间，比如您想让div在什么时候消失以及速度。

- Dharti Gohil