CODEWITHSUNDEEP
javascriptjquerycsshtml
batMask
batMask

Reputation: 744

jQuery auto load a div after a 5sec

I have 4 div bars in my home page. I'm loading those div bars by on click. But I want to load the the 1st div when page loading, then the 2nd div should load after 5 seconds. after 5 sec 3rd div should load like wise. this is my code : - 

$(document).ready(function () {

     $('#click1').click(function () {
        $('#desc1').toggle(400);
        $('#desc2').hide();
        $('#desc3').hide();
        $('#desc4').hide();
        $('#desc5').hide();
     });
});

Thnx,

Upvotes: 0

Views: 205

Answers (5)

user2735175
user2735175

Reputation: 1

(function(s){ var i = 2, flag, url;

  function load(){

    if( i == 6){
      console.log("complete output!");
      clearTimeout(flag);
      return ;
    }

    //make something
    $(selector+i).load(ulr+"&index="+i, function(){
      i++;
      flag = setTimeout(load,5000);
    })

  }
  load();
})('desc');

toggle can complete display or hide , i would like to use load and setTimeout

Upvotes: 0

Manoj
Manoj

Reputation: 73

Try this code

$('#click1').click(function () {
        $('#desc1').fadeIn(400);
        $('#desc2').delay(5000).fadeIn();
        $('#desc3').delay(10000).fadeIn();
        $('#desc4').delay(15000).fadeIn();
        $('#desc5').delay(20000).fadeIn();
     })

Upvotes: 0

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11717

var delay=5000;

    $(document).ready(function () {
            $('#desc1').toggle(function(){
                $('#desc2').toggle(delay,function(){
                    $('#desc3').toggle(delay,function(){
                        $('#desc4').toggle(delay,function(){
                            $('#desc5').toggle(delay,function(){
                            });
                        });
                    });
                });
            });
        });

Try this

Upvotes: 1

enguerranws
enguerranws

Reputation: 8233

You should consider setInterval();, cleanest way to achieve that IMHO.

Something like: 

$('#click1').click(function () {
    var nb = 1;
    var int = setInterval( function(){                      
        var el = $('#desc'+ nb);
        el.addClass('show');
        nb++;
        if( nb > 5) {
            clearInterval(int);
        }
    }, 400);
});

I copied that from an old project. Note that I use CSS to toggle the div.

Upvotes: 0

Aaroniker
Aaroniker

Reputation: 190

You can show them with delay(ms);

$('#desc2').delay(5000).show();
$('#desc3').delay(10000).show();
$('#desc4').delay(15000).show();
$('#desc5').delay(20000).show();

Upvotes: 0

Related Questions