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

Question

我想让所有用户都知道我们有新的东西，所以当用户来到网站时我想要一个小小的语音泡泡出现几秒钟就会说“别忘了查看我们的新内容”和消失。有关如何开始这方面的任何帮助吗？

此致

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

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

Answer 5

由于每个人都很乐意提供jQuery答案，如果在问题的任何地方都没有提到jQuery，我会添加一个非jQuery的答案。

假设您的消息包含在ID为“new”的元素中，您只需在页面加载时运行此消息：

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

以上是example以上的行动。

然而，请注意，使用jQuery可能更容易，如果你想要褪色等效果，使用jQuery肯定会更容易。