Show And Hide Divs At A Specific Time Interval Using JQuery But Stop The Last Div

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 jQ

Solution 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/

Solution 2:

First div1 is visible and div2 is hidden. To show div2 and hide div1 after a specific time, you can add a common class, x:

 $('.x').delay(1000).toggle();

You can adjust delay and toggle speed. Toggle will display matching hidden elements and hide matching shown elements.
See jQuery toggle docs

Solution 3:

$('html').addClass('js');

$(function() {

  var timer = setTimeout( showDiv, 5000);

  var counter = 0;

  function showDiv() {
    if (counter ==0) { counter++; return; }

    $('div','#container')
      .stop()
      .hide()
      .filter( function() { return this.id.match('div' + counter); })   
      .show('fast');
    counter == 3? counter = 0 : counter++; 

  }

});

use setTimeout in place of setInterval

Solution 4:

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});