Continuous triggering and delayed execution of jQuery animation _ jquery

This article describes how to solve the continuous triggering and delayed execution of jQuery animations, the example analyzes the solutions to problems such as delayed and repeated execution when using slideUp, slideDown, and animate animations in jQuery, if you need it, refer to the examples in this article to describe the solutions for continuous triggering and delayed execution of jQuery animations. 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:

The code is as follows:

// Syntax structure
$ ("# P"). stop (); // stop the current animation and continue the next animation
$ ("# P"). stop (true); // clear all animations of the element
$ ("# P"). stop (false, true); // let the current animation directly reach the final state and continue the next animation
$ ("# P"). stop (true, true); // clear all animations of the element so that the current animation reaches the final state.

The second method is recommended here:

The code is as follows:

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

I hope this article will help you with jQuery programming.