About jquery animation lag problem (GO)

When the Slideup, Slidedown, animate and other animations are used in jquery, if the target element is driven by an external event, when the mouse triggers the external element event quickly, the animation will lag behind repeatedly, its performance is not elegant. Greatly affect the experience of using.

The problem was also encountered in development. No record of the habit, resulting in a long time to forget the common bug solution. Now found must be recorded.

Bug

Original code:

    $ (function() {            $ (". Box"). Hover (                function() {                    $ ("ul"). Slidedown;                },                function() {                    $ ("ul"). Slideup ();                }            );        });    

Solution Ideas:

Stops all animations in advance of the event that triggered the element, and then executes the corresponding animation event (using the Stop function).

Post-resolution code:

        $ (function() {            $ (". Box"). Hover (                function() {                    $ ("ul "). Stop (). Slidedown ()                ,                function() {                    $ (" UL "). Stop (). Slideup ();})        ;

With jquery's chained invocation, all animation effects are cleared before the element is animated.

After resolution:

The animation is performed only once, no matter how many times it is triggered.

About jquery animation lag problem (GO)