Jquery navigation menu drop-down result implementation example

In the jquery implementation drop-down menu, we only need to bind the event mousemove and mouseleave, and then trigger some corresponding functions to solve this problem. Let's take a look at the implementation process.

A piece of jquery navigation menu code is downloaded from the lazy Image Library. It is found that the pull effect is frequently executed when the mouse is moved frequently out of the menu just opened, until the number of moves in just completed. In this way, the animation effect is inconsistent with the mouse action, and the effect experience is quite poor. View the jquery help documentation and find that the stop () animation can be stopped.

Definition and usage of stop:
 
Stop (stopAll, goToEnd) // method to stop an animation that is currently running.
 
// StopAll is optional. Specifies whether to stop all animations added to the queue of the selected element.
// Optional. Specifies whether the current animation can be completed. This parameter can only be used when the stopAll parameter is set.
I chose to use stop (false, true) to stop the animation when the mouse is removed. But the effect is not ideal, because the menu drop-down and hide settings of the animation effect, after the stop animation disappears ..

After reading the jquery help documentation again, I finally found the is (": animated") little thing to judge the animation status of the element. Then we can achieve this: if the current element does not have any animation effect when the mouse moves in, we will add a drop-down animation.

OK, the effect is very good. The following is the relevant judgment code:

If ($ (this ). find ('ul '). is (": animated") = false) {// determines whether the element is in the animation state. If no animation is ongoing, add a new animation.

 
$ (This). find ('ul '). slideDown ("normal"); // (MS 1500) "slow", "normal", "fast"

}

Example:

Html code:
 

The Code is as follows:

Copy code

<Li class = "skylevel"> <a href = "#" target = "_ blank"> logs </a> <Ul> <Li> <a href = "#" target = "_ blank"> tone </a> </li> <Li> <a href = "#" target = "_ blank"> two sentences </a> </li> <Li> <a href = "#" target = "_ blank"> network Abstract </a> </li> </Ul> </Li> <Li class = "skylevel"> <a href = "#" target = "_ blank"> industry </a> <Ul> <Li> <a href = "#" target = "_ blank"> webmaster </a> </li> <Li> <a href = "#" target = "_ blank"> E-Commerce </a> </li> <Li> <a href = "#" target = "_ blank"> mobile </a> </li> <Li> <a href = "#" target = "_ blank"> others </a> </li> </Ul> </Li>

 
 
Jq code:
 
 

The Code is as follows:

Copy code

$ (Document). ready (function (){ $ ('Li. skylevel'). mousemove (function (){ If ($ (this ). find ('ul '). is (": animated") = false) {// determines whether the element is in the animation state. If no animation is ongoing, add a new animation.   $ (This). find ('ul '). slideDown ("normal"); // (MS 1500) "slow", "normal", "fast" }   });     $ ('Li. skylevel'). mouseleave (function (){ $ (This). find ('ul '). slideUp ("normal "); }); });