jQuery Fading/Invisibility

Question

Hey All,

How can I make a <h3> fade out or just hide itself on my page after a few seconds once the page has loaded?

Answer 1

You can use a simple .delay() call, like this:

$(function() {
  $("h3").delay(3000).fadeOut();
});

On document.ready this selects all <h3> elements and adds a 3 second delay before their .fadeOut(), just adjust the selector as needed, for example: h3.message for a
<h3 class="message">.

Here's the more general non-.delay() version of delaying any action:

$(function() {
  setTimeout(function() { $("h3").fadeOut(); }, 3000);
});

Answer 2

$(function(){$("whateverselector").fadeOut()});

Answer 3

  $(document).ready(function() {
    setTimeout(function(){    $("#h3").fadeOut();    }, 3000);    
});

Answer 4

There are different Timer Plugins for jQuery. Here is a short example. Here

Its possible to set a timer and if the time is over you hide or fadeout.

Answer 5

You can achieve this with setTimeout function: http://www.w3schools.com/js/js_timing.asp

var timeout = 3; // 3 seconds
$(function(){ // DOM ready
  setTimeout(function(){
    $("h3").fadeOut();
  }, timeout*1000);
});

Answer 6

Hi!

Try the following:

$(function(){
setTimeout("$('h3.classname').fadeOut()", 2000);
});

This will make the h3 with class classname fade out 2 seconds after the DOM is loaded.