The jQuery animation has a continuous trigger and lags behind for repeated execution.

The jQuery animation has a continuous trigger and lags behind for repeated execution.

This article describes how to solve the problem of continuous triggering and delayed execution of jQuery animation. Share it with you 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 an external event, when the mouse quickly triggers an external element event continuously, the animation will be repeatedly executed in a delayed manner, its performance is not elegant.

Solution:

1. Set the event on the trigger element to delayed processing to avoid the problem of delayed execution (using setTimeout)

2. stop all animations in advance when an element event is triggered, and then execute the corresponding animation event (use stop)

Jquery stop:
Copy codeThe Code is as follows: // syntax structure
$ ("# Div"). stop (); // stop the current animation and continue the next Animation
$ ("# Div"). stop (true); // clear all animations of the element
$ ("# Div"). stop (false, true); // Let the current animation directly reach the final state and continue the next Animation
$ ("# Div"). stop (true, true); // clear all animations of the element so that the current animation reaches the final state.
The second method is recommended here:
Copy codeThe Code is as follows: $ ("# div"). stop (). animate ({width: "100px"}, 100 );

I hope this article will help you with jQuery programming.