jquery navigation menu Drop-down Effect Implementation Example

Source: Internet
Author: User

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 ");
 });
 
});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.