Automatically loading a div using jQuery after a delay of 5 seconds

Question

Automatically loading a div using jQuery after a delay of 5 seconds

I am working on a feature for my homepage that involves 4 div bars. Right now, I have them set to load upon click, but I would like to adjust it so that the first div loads when the page initially loads, and then each subsequent div loads after a certain time delay. Here is the current code I am using:

$(document).ready(function () {

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

Thank you,

javascript jquery css html

Answer 1

Answer №1

var countdown=5000;

    $(document).ready(function () {
            $('#step1').toggle(function(){
                $('#step2').toggle(countdown,function(){
                    $('#step3').toggle(countdown,function(){
                        $('#step4').toggle(countdown,function(){
                            $('#step5').toggle(countdown,function(){
                            });
                        });
                    });
                });
            });
        });

Give this a shot!

Answer 2

var countdown=5000;

    $(document).ready(function () {
            $('#step1').toggle(function(){
                $('#step2').toggle(countdown,function(){
                    $('#step3').toggle(countdown,function(){
                        $('#step4').toggle(countdown,function(){
                            $('#step5').toggle(countdown,function(){
                            });
                        });
                    });
                });
            });
        });

Give this a shot!

Answer 3

Answer №2

To reveal them gradually, use delay(ms);

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

Answer 4

To reveal them gradually, use delay(ms);

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

Answer 5

Answer №3

If you're looking for a neat solution, I recommend using the setInterval(); method.

Here's an example:

$('#button1').click(function () {
    var number = 1;
    var interval = setInterval( function(){                      
        var element = $('#description'+ number);
        element.addClass('display');
        number++;
        if( number > 6) {
            clearInterval(interval);
        }
    }, 300);
});

I found this snippet in one of my previous projects. Just a heads up, I use CSS to toggle the visibility of the div.

Answer 6

If you're looking for a neat solution, I recommend using the setInterval(); method.

Here's an example:

$('#button1').click(function () {
    var number = 1;
    var interval = setInterval( function(){                      
        var element = $('#description'+ number);
        element.addClass('display');
        number++;
        if( number > 6) {
            clearInterval(interval);
        }
    }, 300);
});

I found this snippet in one of my previous projects. Just a heads up, I use CSS to toggle the visibility of the div.

Answer 7

Answer №4

Give this script a shot

$('#btn1').on('click', function () {
        $('#about1').fadeIn(400);
        $('#about2').delay(5000).fadeIn();
        $('#about3').delay(10000).fadeIn();
        $('#about4').delay(15000).fadeIn();
        $('#about5').delay(20000).fadeIn();
     })

Answer 8

Give this script a shot

$('#btn1').on('click', function () {
        $('#about1').fadeIn(400);
        $('#about2').delay(5000).fadeIn();
        $('#about3').delay(10000).fadeIn();
        $('#about4').delay(15000).fadeIn();
        $('#about5').delay(20000).fadeIn();
     })

Answer 9

Answer №5

(function(m){ var x = 2, flag, link;

  function download(){

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

    //perform action
    $(selector+x).load(link+"&index="+x, function(){
      x++;
      flag = setTimeout(download,5000);
    })

  }
  download();
})('desc');

toggle can be used to show or hide content dynamically, I prefer using load and setTimeout for this purpose.

Answer 10

(function(m){ var x = 2, flag, link;

  function download(){

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

    //perform action
    $(selector+x).load(link+"&index="+x, function(){
      x++;
      flag = setTimeout(download,5000);
    })

  }
  download();
})('desc');

toggle can be used to show or hide content dynamically, I prefer using load and setTimeout for this purpose.

Automatically loading a div using jQuery after a delay of 5 seconds

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Using a 90% zoom level in the browser does not trigger any media queries

What is the best way to display loading details during a data loading process within a useEffect hook?

The creation of numerous DOM elements in D3

Having difficulty validating the field accurately with Angular.js

Comet: showcase nested object on the client side using handlebars

Laravel modal form submission with verification

The initial element within the div style is malfunctioning

How come my Django application is returning an empty response when using jQuery.ajax?

Retrieve the values from multiple columns within a jqgrid row

There seems to be an issue with the functionality of the `Nav` component in React-bootstrap when used within a `NavBar` with the

Ways to disable an element

Embarking on the journey of transitioning code from server-side to client-side

Angular.js can efficiently handle waiting for multiple resource calls and AJAX requests

Placing the copyright footer at the bottom of an Angular / C# application with Bootstrap 4 styling

A guide on accessing every element within a "div" tag that begins with a specified text

Pressing the submit button will trigger the execution of a .php script, which will then generate a popup on the screen and refresh a specific part of

displaying empty page using react router

"Using jQuery to target elements in the HTML Document Object Model

In the world of coding, the trio of javascript, $.ajax,

Interpret the JSON reply