lala90 lala90 - 2 months ago 18
Javascript Question

Show and hide divs at a specific time interval using jQuery but stop the last div

I need a code is auto hide div 1 and show div 2 in specific time (i guess i need 10sec or 15sec), and i have view this post :
Show and hide divs at a specific time interval using jQuery

but it is repeat the same for every 10 seconds, i just need hide div 1 and show div 2, then just stop it forever. Anyone can help to edit the code?
Thanks so much, i really need it badly, but my java is so poor :(

Answer

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/