The use of stop() in jquery

Purpose: In order to understand the usage of stop(), let’s take an example and see it in an intuitive way.

Physical object: A p with id="animater" contains a piece of text. (animator is used below to represent the actual object)

The final complete effect of the animation: animater moves to the right 800px (this complete process is animation 1), then, the font gradually becomes larger (this complete process is animation 2), then, the transparency gradually decreases to 0 (this complete process is animation 3), and then the transparency gradually returns to 1 (This complete process is animation 4), and then the font size becomes 16px and moves to a position 200px from the left border (this complete process is animation 5).

#Operation: Click on the buttons with different IDs to watch the effect.

##HTML code:

##

       <p id="animater">
            stop()方法测试        </p>

        <p id="button">
            <input type="button" id="button1" value="stop()"/>
            <input type="button" id="button2" value="stop(true)"/>
            <input type="button" id="button3" value="stop(false,true)"/>
            <input type="button" id="button4" value="stop(true,true)"/>
            
        </p>

CSS code:

         #animater{
                width: 150px;
                background:activeborder;
                border: 1px solid black;                /*为了移动，需设置此属性*/
                position: relative;
            }

jquery code:

              //            为了看效果，随意写的动画
                $('#animater').animate({                    'right':-800
                }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal');        
                //           点击不同的button执行不同的操作        
                $('#button1').click(function(){                    //默认参数是false，不管写一个false还是两个false还是没写false效果一样
                    $('#animater').stop();
                });
                $('#button2').click(function(){                    //第二个参数默认false
                    $('#animater').stop(true);
                });
                $('#button3').click(function(){
                    $('#animater').stop(false,true);
                });
                $('#button4').click(function(){
                    $('#animater').stop(true,true);
                });

W3School has this description of: stop(

stopAll

,goToEnd)

##ParametersDescriptionstopAllgoToEnd Optional. Specifies whether the current animation is allowed to complete.

My understanding:

#When stopAll is false, all animations of the selected elements added to the queue will not be stopped, only the current one will be stopped. animation. When stopAll is true, stop all animations added to the queue (if goToend is true, jump directly to the final effect of the current animation).

When goToend is false, it is not allowed to jump directly to the final effect of the current animation ( should be the so-called completion of the current animation Animation bar), when goToend is true, it is allowed to jump directly to the final end effect of completing the current animation

Every time you run the page and the animater moves, click on different buttons and you will see the following different effects (click when the animator is in animation 1):

Click button button1 (stop()), due to two The parameters are all false. So when the click occurs, the animator does not jump to the final effect of the current animation (animation 1), but directly enters animation 2, and then animations 3, 4, and 5 until the entire animation is completed.

Click button button1 (stop(true)). Since the first one is true and the second one is false, the animator stops immediately and the animation stops moving.

Click button button1 (stop(false,true)). Since the first one is false and the second one is true, when the click occurs, the current animation (animation 1) of the animater stops and the animater directly Jump to the final end effect position of the current animation (Animation 1), and then execute the following animations (Animation 2, 3, 4, 5) normally until the entire animation is completed.

Click button button1 (stop(true, true)). Since both are true, when the click occurs, the animater jumps to the final end effect position of the current animation (animation 1), and then all animations stop. .

Actual cases encountered at work:

I made a drop-down menu in the project, when the mouse moves up When the menu is displayed, the menu is hidden when the mouse leaves.

If I move the mouse in and out of the menu quickly and continuously (that is, when the menu drop-down animation is not completed, the mouse moves out of the menu again). "Animation accumulation" will occur. When the mouse stops moving, the accumulated animation will continue to be executed until the animation sequence is completed.

Solution: Add stop(true,true# before writing the animation effect code ##), so that every time you quickly move in and out of the menu, it will be normal. When moving into a menu, stop all animations added to the queue, but complete the current animation (jump to the final effect position of the current animation)

Optional. Specifies whether to stop all queued animations of the selected element.
	This parameter can only be used when the stopAll parameter is set.

The above is the detailed content of The use of stop() in jquery. For more information, please follow other related articles on the PHP Chinese website!