Jquery hover's solution to non-stop flash problems (also used for stop (), jqueryhover

Jquery hover's solution to non-stop flash problems (also used for stop (), jqueryhover

Jquery is widely used in front-end development. I encountered a problem in the past. The effects of a drop-down jquery drop-down menu were hover up and kept flashing. It was good to use mouseovermouseout, but it was not done at the time, visit the forum today to see a method. I only blame myself for the fact that I was not very careful with jquery APIs.

You can use Stop () to solve the problem of flashing ()

Stop ([clearQueue], [jumpToEnd])

Overview

Stops all animations that are running on the specified element.

If there are animations waiting for execution in the queue (and clearQueue is not set to true), they will be executed immediately

Parameters

[ClearQueue], [gotoEnd] Boolean, BooleanV1.2clearQueue: Clear the queue if it is set to true. The animation can be ended immediately.

GotoEnd:Immediately complete the animation being executed, reset the original style of show and hide, and call the callback function.

[Queue], [clearQueue], [jumpToEnd] BooleanV1.7queue: name of the queue used to stop the animation

ClearQueue:If it is set to true, the queue is cleared. The animation can be ended immediately.

JumpToEnd:If it is set to true, the queue is completed. You can complete the animation immediately.

When you move the mouse up, you can pull down the menu. When you move the mouse away, you can roll up the menu, and the animation time of the drop-down and roll-up is 5 seconds.

$("#menu").hover(     function () {       $("#menu").animate({ height: "500" }, 5000);     },     function () {       $("#menu").animate({ height: "100" }, 5000);     } );

If I move the mouse over and out of the menu (that is, when the menu drop-down animation is not completed, the mouse moves out of the menu again), an "animation accumulation" occurs. When the mouse stops moving, the accumulated Animation continues until the animation sequence is completed. In this way, the animation effect is inconsistent with the mouse action.

To solve this problem, you only need to add stop () before moving the animation to and from the current animation to the next animation.

The Code is as follows:

$("#menu").hover(     function () {       $("#menu").stop().animate({ height: "500" }, 5000);     },     function () {       $("#menu").stop().animate({ height: "100" }, 5000);     } );

If you want to add a composite animation, add stop () to stop the animation before moving the animation, as shown below:

$("#menu").hover(     function () {       $("#menu").stop().animate({ height: "500" }, 5000).animate({ width: "500px" }, 3000);     },     function () {       $("#menu").stop().animate({ height: "100" }, 5000).animate({ width: "100px" },3000);     } );

The effect is not good, because stop () only stops the animation in the current step (I .e. {height: "500"}), and then enters the animation in the second step (I .e. [width: 500 ″}).

In this case, the first parameter of stop () comes in handy. It will clear all the animation sequences that are not executed below.

$("#menu").hover(     function () {       $("#menu").stop(true).animate({ height: "500" }, 5000).animate({ width: "500px" }, 5000);     },     function () {       $("#menu").stop(true).animate({ height: "100" }, 5000).animate({ width: "100px" },5000);     } );

You can also use the second parameter to bring the animation to its final state. For example, stop (false, true)

The above jquery hover's solution to the non-stop problem (also used by stop () is all the content that I have shared with you in my editor. I hope you can give me a reference, we also hope that you can support the customer's home.