Solution to jQuery animation's continuous triggering, lagging and repeated execution_jquery

The example in this article describes the solution to the continuous triggering and lagging execution of jQuery animation. Share it with everyone for your reference. The specific analysis is as follows:

When using slideUp, slideDown, animate and other animations in jQuery, if the target element is driven by external events, when the mouse triggers external element events quickly and continuously, the animation will be executed repeatedly with lag, which is indecent.

Solution:

1. Set the event on the triggering element to delayed processing to avoid the problem of delayed repeated execution (use setTimeout)

2. Stop all animations in advance when triggering an element's event, and then execute the corresponding animation event (use stop)

jquery stop:

Copy code The code is as follows:

//Grammar structure
$("#div").stop();//Stop the current animation and continue with the next animation
$("#div").stop(true);//Clear all animations of the element
$("#div").stop(false, true);//Let the current animation reach the end state directly and continue with the next animation
$("#div").stop(true, true);//Clear all animations of the element and let the current animation directly reach the end state

The second method is recommended here:

Copy code The code is as follows:

$("#div").stop().animate({width:" 100px"},100);

I hope this article will be helpful to everyone’s jQuery programming.