timed display of div

Question

all i need is some client side code jQuery or JS that will alter the divs style after X seconds

like visibility : hidden; OR max-height : 50px;

or switch the class \ id of the DIV ( preferred )

Answer 1

Use setTimeout

setTimeout(function(){
  // Change the style here... If using jQuery, it turns
  $('#my_divs').css({'visibility':'hidden', 'max-height':'50px'})
  // or
  $('#my_divs').addClass('my-custom-class');
}, x_seconds);

Answer 2

Plain JavaScript solution:

setTimeout(function() {
  document.getElementById('your_div_id').className = 'new_class_name';
}, X * 1000); // X = number of seconds

Answer 3

$(document).ready(function(){
    setTimeout('changeStyle()', 1000); //milliseconds
});

function changeStyle() {
    //do something useful
}

Answer 4

IF u wanna show time after some sec again and again then use

setIntervel('changeStyle()',1000);

and u just wanna use time just once then use

setTimeout('changeStyle()',1000);
function changeStyle() {
 // code to display time
}

Answer 5

Here is one method that I use on a current production website.

$("#divStampWrapper").delay(1500).fadeIn("fast").delay(2500).animate({ top: -250 }, 2500).delay(2500).fadeOut("slow");

Explanation: Basically it grabs the div which holds an image, waits 1.5 seconds and then starts fading it in to view. Once the fade in effect is finished, it waits another 2.5 seconds and starts moving it upward to the new top position. It then waits another 2.5 seconds and starts a fade out. I know it's a bit more than you asked for, but it's a good example of what can be done with the timer.