jquery navigation menu Drop-down Effect Implementation Example

In the Lazy Gallery to download a section of jquery navigation menu code, used to find that when the mouse moved frequently into the move out of the menu just opened now the pull effect will continue to perform frequently, until the completion of the number of moves just made. This causes the animation effect to be inconsistent with the mouse action, the effect experience is quite bad. When you look up the jquery help document, you find that stop () can stop the animation.

Stop () Definition and usage:

The Stop (stopall,gotoend)//method stops the currently running animation.

StopAll Optional. Specify whether to stop all animation that joins the queue for the selected element.
Gotoend Optional. Specify whether the current animation is allowed to complete. 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 moved out. But the effect is not ideal, because the menu Drop-down and pull up set the animation effect, stop after the animation disappeared.

Looking at the jquery Help document again, we finally found the little thing that is (": Animated") to determine the animation state of the element. So we can do this: if the current element does not animate when the mouse moves, we add a pull drawing.

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

if ($ (this). Find (' ul '). Is (": animated") ==false) {//Determine if the element is animated and add a new animation if it is not currently animated

$ (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" > Log </a> <ul> <li><a href= "#" target= "_blank" > Small tone </a></li> <li><a href= "#" target= "_blank" > Two words </a></li> <li><a href= "#" target= "_blank" > net pick </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" > Electric trader </a></li> <li><a href= "#" target= "_blank" > Mobile </a></li> <li><a href= "#" target= "_blank" > Other </a></li> </ul> </li>

JQ Code:

code is as follows

copy code

$ (document). Ready (function () {     $ (' Li.skylevel '). MouseMove (function () {  if ($ (this). Find (' ul '). ": Animated") ==false {   //Determine if the element is animated, and if it is not currently animated, add a new animation             $ (this). Find (' ul '). Slidedown ("normal"); //(MS 1500) "Slow", "normal", "fast"          }    });       $ (' Li.skylevel '). MouseLeave (function () {   $ (this). Find (' ul '). Slideup (" Normal ");  });   });