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

I wan开发者_如何转开发t to make an effect for all users to remind that we have something new so when a user comes to site I want a little speech bubble to appear for several seconds which would say "dont forget to checkout our new content" and disappear. Any help on how to start working on this?

Regards,

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

That should do it for you.

Checkout JQuery animations, they handle event chains too.

Maybe the pulsate effect from jQuery can help you out.

As everyone seems so happy to give jQuery answers, when there is no mention of jQuery anywhere in the question, I will add a non-jQuery answer.

Assuming your message is contained in an element with ID "new", you can simply run this upon page load:

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

Here's an example of the above in action.

However, note that it may well be easier to use jQuery, and it will certainly be easier to use jQuery if you want effects like fading.

All you need to do is make the content you want to display and house it in a <div>.

Then (if your using jQuery) you can call fadeIn on it, and setTimeout to call fadeOut...

EDIT

If you wanted something jQuery-free, you could have a go with this fader object I adapted from an example somewhere out there on the WWW (I forgot where, otherwise I would credit them). Note that this is not nearly as versatile as jQuery and probably not as cross-compatible either, but I have used it with good results in situations where bandwidth was important and I didn't want people downloading the whole jQuery library every time...

An example of how to use it:

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();

If you want the object to start hidden, just do this in your styles:

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

There are more options etc, see comments in the file...

Have a look at this JS fiddle if you want to play with it.