Detailed explanation of jQuery's animate animation method and animation queuing problem solution

animate() animation method
Animation Queuing
delay() method
stop() method to stop the animation
Clear animation queue

Animation queue problem

animate() animation method

Purpose: Execute custom animation of CSS attribute set
Syntax: $(selector).animate(styles,speed,easing,callback)

• Parameter 1: A collection of css property names and property values for the end position of the movement.
• Parameter 2: Optional, specifies the speed of the animation, the default is "normal". Other values, "slow", "normal", "fast", are in numeric format and the unit is milliseconds.
• Parameter 3: Optional, specifies the easing function for setting the animation speed at different animation points. Values include swing (variable speed) and linear (constant speed).
• Parameter 4: Optional, callback function to be executed after the animate function is executed.
• Notice:

① All attribute values with numerical values can be moved;
②Other motion methods, such as slideUp(), also have parameters 3 and 4

 <style>
       *{
                margin: 0;
                padding: 0;
            }
            p{
                position: relative;
                left: 0;
                margin-bottom: 10px;
                background-color: skyblue;
                width: 50px;
                height: 50px;
            }
        </style>
    <!--------------------------------------->
    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
     <script src="../jq/jquery-1.12.4.min.js"></script>
     <script>
            var $ps = $("p");
            //In actual operation, it is better to store the volatile time in a variable var during = 1000;
            //All attribute values with numerical values can be moved $ps.click(function(){
                $(this).animate({"width":500,"opacity":0.5},during,"swing")
            })
        </script>
    </body>

Animation Queuing

If multiple animations are defined on the same element object, the animations will be queued for execution.
If different element objects have animations, no queuing mechanism will occur.
If it is other non-motion code, it will not wait for the motion to complete. For example, changing the css style will not queue up.

<style>
  div{
       width: 100px;
       height: 100px;
       border: 8px solid #ccc;
       position: absolute;
       left: 0;
       top: 0;
       background: url(../../imgs/1.jpg) no-repeat center center;
     }
.box2{
      border-radius: 50%;
      overflow: hidden;
       }
div span{
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(221, 130, 130, 0.4);
     }
</style>
  <!-------------css style------------------->
<body>
  <div class="box1"><span></span></div>
  <div class="box2"><span></span></div>
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
 var $box1 = $(".box1");
 var $box2 = $(".box2");
 var during = 2000;
 //Animation queue comparison $box2.animate({"left": 400,"top":400},during)
 //Box1 and box2 each perform their own animations //Queue multiple animations on the same element $box1.animate({"left": 400},during) //Queue $box1.animate({"top": 400}, during)
 // The bottom of the animation is a timer, asynchronous loading // Non-motion code, about the same element object, will not queue // $box1.css ("height", 200)
 </script>
</body>

The display and hide method with built-in animation, if set to the same element, there is also animation queue

//Other movement methods, if set to the same element, will also queue up$box2.mouseenter(function(){
      $(this).children().slideUp(during)
  })
  $box2.mouseleave(function(){
      $(this).children().slideDown(during)
  })
  //The mouse moves up and down quickly, and then the gray span of box2 keeps sliding in and out until all the times are executed

Movement on the same element can be simplified into a chain call method

//Multiple movements of the same element can be simplified through chain calls //But they still need to be queued $box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

delay() method

Setting delay() before a certain motion method means that the subsequent motion will be executed after a specified time, which has the effect of delaying the motion.
The parameter of delay() is the time value. Other motion methods also have delay effects.

   //delay $box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

stop() method to stop the animation

Sets how the queued animation on the element object is stopped
stop() has two parameters, which can provide four stop modes. Both parameters are Boolean values.

• Parameter 1: Set whether to clear the subsequent animation queue. If it is true, it means clearing (the subsequent animations will also be cleared and no longer executed). If it is false, it means not clearing and only stopping the current animation (the subsequent animations will start executing immediately).
• Parameter 2: Set whether the current animation is completed immediately. If it is true, it means it is completed immediately and the object will immediately move to the end position. If it is false, it means the current animation will not be completed and it will stop immediately at the current position.

<style>
 div {
      width: 100px;
      height: 100px;
      border: 8px solid #ccc;
      position: absolute;
      left: 0;
      top: 40;
      background: url(../../imgs/1.jpg) no-repeat center center;
   }  
 div span {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(221, 130, 130, 0.4);
    }
 </style>
</head>
  
<body>
 <input type="button" value="true true" id="btn1">
 <input type="button" value="true false" id="btn2">
 <input type="button" value="false false" id="btn3">
 <input type="button" value="false true" id="btn4"><br>
  
 <div class="box1"><span></span></div>
  
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
   var $box1 = $(".box1");
  
   var during = 2000;
  
   //Queue multiple animations on the same element $box1.animate({ "left": 400 }, during)
   $box1.animate({ "top": 400 }, during)
   $box1.animate({"left":0},during)
   $box1.animate({"top":40},during)
 
  // Stop animation // Add button click event var $btn1 = $("#btn1")
  var $btn2 = $("#btn2")
  var $btn3 = $("#btn3")
  var $btn4 = $("#btn4")
  
  //true true Clear the queued animations and complete the current animation immediately, stopping at the end position$btn1.click(function () {
       $box1.stop(true, true);
  })
  //true false Clear animation and stop at the current $btn2.click(function () {
     $box1.stop(true, false);
  })
  //false false Do not clear the following animations, stop at the current // and then execute the next animation $btn3.click(function () {
     $box1.stop(false, false);
  })
  //false true Do not clear the following animation, the current movement will end immediately$btn4.click(function () {
       $box1.stop(false, true);
  })
 </script>
</body>

By default, the parameter value is false
In actual work, it is generally required to clear the queue behind and stop the current position. Stop (true) is often used. If the second parameter is not set, it defaults to false.

Clear animation queue

Animation queue problem

If the program that starts the motion is placed in an event function, the event will be triggered multiple times, and the function will be executed multiple times. In this way, multiple animations will be added to an element and the animations will be queued. (Animation accumulation problem)

It is necessary to clear the queued animations and perform anti-harassment operations.

Workaround

Method 1: Using the stop() method

Add a stop(true) before each movement function, which means that before the movement is executed, the previously queued animation will be cleared and then stop at the current position.

<style>
 div {
     width: 100px;
     height: 100px;
     border: 8px solid #ccc;
     position: absolute;
     left: 0;
     top: 0;
     background: url(../../imgs/1.jpg) no-repeat center center;
   } 
div span {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(221, 130, 130, 0.4);
  }
  </style>
<body>
  <input type="button" value="true true" id="btn1">
  <input type="button" value="true false" id="btn2">
  <input type="button" value="false false" id="btn3">
  <input type="button" value="false true" id="btn4"><br>

  <div class="box1"><span></span></div>

  <script src="../jq/jquery-1.12.4.min.js"></script>
  <script>
     var $box1 = $(".box1");

     var during = 2000;
    // Clear animation $box1.mouseenter(function(){
        $(this).children().stop(true).slideUp(during)
    })

   $box1.mouseleave(function(){
       $(this).children().stop(true).slideDown(during)
   })
    </script>
</body>

Method 2: Using function throttling method

If the element is moving, return directly and do not execute the subsequent movement code.

Each jQuery object can call an is() method, which is used to display a certain state of the element object. If the parameter position is is(":animated"), animated means moving, and the return value is a Boolean value, true means moving, false means no movement

//Function throttling method $box1.mouseenter(function(){
    if(is(":animated")){
        //If it is judged to be moving, return directly and no longer execute other animation returns;
    }
    //If there is no movement, continue to execute the following new animation $(this).children().slideup(during);

})

$box1.mouseenter(function(){
    if(is(":animated")){
        //If it is judged to be moving, return directly and no longer execute other animation returns;
    }
    //If there is no movement, continue to execute the new animation behind //Sometimes, for the sake of safety, it is used in conjunction with stop(true) $(this).children().stop(true).slideup(during);

})

Sometimes, for safety reasons, the function throttling is used in conjunction with stop(true).
There are differences between stop(true) and function throttling methods, these two methods of solving the animation accumulation problem. The stop method can make the animation stop at the current position, and the function throttles. After the return is returned when stopping, the current animation will generally be completed.

The above is a detailed explanation of jQuery's animate animation method and the solution to the animation queuing problem. For more information about jQuery's animate animation method, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

JQuery animate animation application example
Example of jQuery encapsulating animate.css
Example of continuous motion of jquery animate animation
How to use animate() in jQuery and solve the problem that $("body").animate({"scrollTop":top}) is not supported by Firefox
How to use jQuery animate() to achieve background color gradient effect [using jQuery.color.js plug-in]
A brief discussion on the implementation of jQuery's animate() animation example using native JS
jQuery realizes dynamic increase of three-dimensional numbers (animate method)
Several Usages and Precautions of Animate in jQuery
jQuery uses animate to achieve the floating effect of ul list items
Using jQuery's animate animation function to achieve the pea emission effect
A simple example of implementing the jQuery animate() animation effect with native JS

<<: Multiple ways to calculate age by birthday in MySQL

>>: How to change the terminal to a beautiful command line prompt in Ubuntu 18