Question

I need code to automatically hide div1 and show div2 after a specific amount of time, say 10sec or 15sec.
I read this post :
Show and hide divs at a specific time interval using jQuery,

but it repeats every 10 seconds. I just need to hide div1 and show div2 once.

Answer 1

Assuming that your divs have the ids "div1" and "div2“, and that "div1" starts out visible and "div2" starts out hidden, then you can hide the first and show the second after x milliseconds like this:

$("#div1").delay(10000).hide(0, function() {
    $("#div2").show();
});

You can use .fadeOut() and .fadeIn() or other animation methods instead of .hide() and .show() if you like.

Put the above code inside a document ready handler if the intention is for this to happen automatically, or in a click handler or whatever if it is in response to something the user does.

Demo: http://jsfiddle.net/s7NXz/

If you have more than two divs and you want to cycle through them exactly once you can do something like this:

var $divs = $("div").hide(),    // use an appropriate selector here
    current = 0;

$divs.eq(0).show();             // show the first

function showNext() {
    if (current < $divs.length - 1) { // if not past the end then
        $divs.eq(current).delay(2000).fadeOut('fast', function() {
            current++;
            $divs.eq(current).fadeIn('fast');
            showNext();
        });
    }
}
showNext();

Demo: http://jsfiddle.net/s7NXz/1/