div出现几秒钟，并在jquery/javascript中消失？

Question

我想为所有用户提醒，我们有新的东西，所以当用户访问网站时，我想要一个小小的语音气泡出现几秒钟，这会说“不要忘记检查我们的新内容”并消失。任何帮助如何开始在此工作？

Regards，

Answer 1

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

这应该为你做。

Answer 2

Checkout JQuery动画，它们也处理事件链。

Answer 3

您只需制作您想要显示的内容并将其放置在<div>中即可。

然后（如果你使用jQuery），你可以调用它的fadeIn，并setTimeout叫fadeOut ...

编辑

如果你想要的东西，jQuery的自由，你可以一展身手与this fader object我改编自WWW的某个地方（我忘了在哪里，否则我会相信他们）。请注意，这不像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如果你想玩它。

Answer 4

也许pulsate从jQuery的效果可以帮助你。

Answer 5

大家似乎都很高兴给jQuery的答案，当没有提到问题中的任何地方的jQuery，我会添加一个非jQuery的答案。

假设你的消息包含在一个元素ID为“新”，你可以简单地在网页加载时运行此：

setTimeout(function() { 
    document.getElementById("new").style.display = "none"; 
}, 2000); 

下面是上述的example在行动。

但是，请注意，它可能会更容易使用jQuery，如果您想要淡入淡出效果，使用jQuery肯定会更容易。