div会出现几秒钟，然后在jquery/javascript中消失？

Question

我想给所有的用户一个提醒，我们有新的东西，所以当一个用户来到网站时，我想要一个小的讲话气泡出现几秒钟，它会说“不要忘记检查我们的新内容”，然后消失。关于如何开始这方面的工作有什么帮助吗？

致以敬意，

Answer 1

$('#mydiv').fadeIn(3000).delay(4000).fadeOut(3000);   

这对你来说应该足够了。

Answer 2

查看JQuery动画，它们也可以处理事件链。

Answer 3

您所需要做的就是制作要显示的内容，并将其存放在<div>中。

然后(如果您使用的是jQuery)，您可以对其调用fadeIn，并使用setTimeout来调用fadeOut...

编辑

如果你想要一些没有jQuery的东西，你可以试试我从WWW上的某个地方改编的this fader object (我忘了在哪里了，否则我会信任他们)。注意，这不像jQuery那么通用，可能也没有交叉兼容性，但我在带宽很重要的情况下使用它，效果很好，我不想让人们每次都下载整个jQuery库……

下面是如何使用它的示例：

var objToFade = document.getElementById('object_to_fade');
var theFader = new FadeHandlers(objToFade);

// Fade the object out
theFader.disappear();

// Fade the object in
theFader.appear();

// Hide the object instantly
theFader.hide();

// Show the object instantly
theFader.show();

// The appear() and disappear() methods will do a callback on completion, which can be defined like this...
theFader.fadeCallBack = function (el) {
  // The @el parameter is a reference to objToFade
  alert(el.id+' has finished fading');
}

// There is an boolean isVisible property... guess what it means...
if (theFader.isVisible) {
  theFader.disappear();
}

// If you have many objects to fade, I like to do this...
var objToFade = document.getElementById('object_to_fade');
objToFade.fader = new FadeHandlers(objToFade);
// ...then you can do things like this later on...
document.getElementById('object_to_fade').fader.appear();

如果您希望对象开始隐藏，只需在您的样式中执行以下操作：

#object_to_fade {
  filter:alpha(opacity=0);
  opacity: 0;
}

还有更多选项等，请参阅文件中的注释...

如果你想使用this JS fiddle，可以看看它。