Arrange DIV elements sequentially with HTML, JQuery, and CSS

Question

Arrange DIV elements sequentially with HTML, JQuery, and CSS

Live Demo: Live Demo

HTML:

   <div class="target">
      <img src="bg-clock.png" alt="jQuery" />
   </div>
   <div class="target2">
      <img src="bg-clock.png" alt="jQuery" />
   </div>

CSS:

.target, .target2 {
    display: none;
}

JQuery:

  $(document).ready(function() {
       $(".target").show( "drop", 
                      {direction: "down"}, 1000 );
       $(".target2").delay(1000).show( "drop", 
                      {direction: "down"}, 1000 );

  });

In the current setup, both DIVs appear simultaneously. However, I am looking to make 'target2' appear only after 'target1' has completed its animation, and the same sequence should follow for any additional DIV elements.

javascript jquery html css

Answer 1

Answer №1

To ensure that target2 is only animated once the animation of target1 has completed, utilize the complete callback of the initial animation function.

  $(document).ready(function () {
      $(".target").show("drop", {
          direction: "down",
          complete: function () {
              $(".target2").show("drop", {
                  direction: "down"
              }, 1000);

          }
      }, 1000);

  });

Check out the Fiddle for reference!

Learn more about the .show() method here.

If you have a series of targets to animate, consider using this approach:

Add a common class name like slideIn to your targets for easy selection with a single selector. You can also use multiple class names or an attribute startswith selector.

  var elems = $('.slideIn').get(); // get all the targets into an array.

  function animate() {
      var elem = elems.shift(); //remove the first element from the array

      $(elem).show("drop", { 
          direction: "down",
          complete: function () {
             if(elems.length > 0)
                window.setTimeout(animate); //recursive callback
          }
      }, 1000);
  }

  animate(); //start the animation.

Another useful Fiddle example here!

Answer 2

To ensure that target2 is only animated once the animation of target1 has completed, utilize the complete callback of the initial animation function.

  $(document).ready(function () {
      $(".target").show("drop", {
          direction: "down",
          complete: function () {
              $(".target2").show("drop", {
                  direction: "down"
              }, 1000);

          }
      }, 1000);

  });

Check out the Fiddle for reference!

Learn more about the .show() method here.

If you have a series of targets to animate, consider using this approach:

Add a common class name like slideIn to your targets for easy selection with a single selector. You can also use multiple class names or an attribute startswith selector.

  var elems = $('.slideIn').get(); // get all the targets into an array.

  function animate() {
      var elem = elems.shift(); //remove the first element from the array

      $(elem).show("drop", { 
          direction: "down",
          complete: function () {
             if(elems.length > 0)
                window.setTimeout(animate); //recursive callback
          }
      }, 1000);
  }

  animate(); //start the animation.

Another useful Fiddle example here!

Answer 3

Answer №2

If you're dealing with multiple targets, it's best to avoid using a callback function as the nesting can become complicated. Instead, you can implement a delay on each target element like so:

$(document).ready(function() {
     $(".target").show( "drop", 
                  {direction: "down"}, 1000 );
     $(".target2").delay(200).show( "drop", 
                  {direction: "down"}, 1000 );
     $(".target3").delay(200).show( "drop", 
                  {direction: "down"}, 1000 );
     $(".target4").delay(200).show( "drop", 
                  {direction: "down"}, 1000 );

});

This approach introduces a slight pause between showing each target, allowing you to adjust the timing for your desired effect.

Answer 4

If you're dealing with multiple targets, it's best to avoid using a callback function as the nesting can become complicated. Instead, you can implement a delay on each target element like so:

$(document).ready(function() {
     $(".target").show( "drop", 
                  {direction: "down"}, 1000 );
     $(".target2").delay(200).show( "drop", 
                  {direction: "down"}, 1000 );
     $(".target3").delay(200).show( "drop", 
                  {direction: "down"}, 1000 );
     $(".target4").delay(200).show( "drop", 
                  {direction: "down"}, 1000 );

});

This approach introduces a slight pause between showing each target, allowing you to adjust the timing for your desired effect.

Arrange DIV elements sequentially with HTML, JQuery, and CSS

Answer №1

Answer №2

Similar questions

jQuery used to create a variety of animations that are activated by scrolling

How to align a div with embedded tweets in the center

The JavaScript calculator fails to display the value of buttons on the screen when they are pressed

Setting up global color variables for React with Material UI theming is essential for ensuring consistent and

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

Position navbar contents at the top of the screen

Is there a way to verify if a React hook can be executed without triggering any console errors?

Successfully resolved: Inability to dynamically adjust button color according to its state

Can you explain the significance of this specific form of variable declaration?

Split a column into two at the md breakpoint with Bootstrap

Can you explain the purpose of the search_/> tag used in this HTML code?

How can I utilize Material-UI's Grid component to make a single cell occupy the entire remaining horizontal space?

What could be the reason behind datatables automatically setting the table width when the bServerSide parameter is set to true

Connect the front end files, including HTML, CSS, and JavaScript, to the Node.js backend

Using vue-resource to intercept an ajax error and catching the "Uncaught (in promise)" exception

JQuery transmits null values

css element remains stationary and in view

Preventing a user with the same name as the one in the table from being added by utilizing a jQuery contains check proved

json - {"response":{"messageTitle":"Message Delivered"}}

React checkbox remains checked even after uncheckingIs this revised version