Div在jquery/javascript中出现几秒钟然后消失

div appears for several seconds and disappears in jquery/javascript?

本文关键字：几秒 钟然后 消失 然后 javascript Div jquery      更新时间：2023-09-26

我想让所有的用户提醒，我们有一些新的东西，所以当一个用户来到这个网站，我想要一个小的语音气泡出现几秒钟，它会说"不要忘记checkout我们的新内容"，然后消失。有什么可以帮助我的吗?

认为,

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

应该可以了。

检查JQuery动画，它们也处理事件链

也许jQuery的脉动效果可以帮到你。

每个人似乎都很乐意给出jQuery的答案，当问题中没有任何地方提到jQuery时，我将添加一个非jQuery的答案。

假设您的消息包含在ID为"new"的元素中，您可以简单地在页面加载时运行:

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

下面是上述操作的一个示例:

但是，请注意，使用jQuery可能会更容易，如果您想要像褪色这样的效果，使用jQuery肯定会更容易。

你所需要做的就是制作你想要显示的内容并将其放置在<div>中。

然后(如果你使用jQuery)你可以调用它的fadeIn，和setTimeout调用fadeOut…

编辑

如果你想要一些无jquery的东西，你可以尝试一下这个fader对象，我改编自WWW上的一个例子(我忘了在哪里，否则我会相信他们)。请注意，它不像jQuery那样通用，可能也不像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;
}

有更多的选项等，见文件注释…

如果你想玩的话，可以看看这个JS小提琴

相关文章：