Implementation of mouse-click navigation menu based on jquery animation effect with source download _jquery

Mouse click on the water Wave animation vertical navigation code based on jquery. This is a JQUERY+CSS3 based on the implementation of the effect of the vertical navigation bar effects. The effect chart is as follows:

Effect Display source Download

HTML code:

<div class= "NAV" > <ul> <li><a> Home </a></li> <li><a> About Us </a> </li> <li><a> Product Center </a></li> <li><a> Success Case </a></li> <li>&  lt;a> Contact Us </a></li> <li><a> online message </a></li> </ul> </div> <script Type= "Text/javascript" src= "js/jquery.min.js" ></script> <script type= "Text/javascript" >//jquery
  Time var parent, ink, D, X, y;
   $ (". Nav ul li a"). Click (function (e) {parent = $ (this). parent (); Create. Ink element if it doesn ' t exist if (parent.find (". Ink"). Length = = 0) parent.prepend ("<span class= ' ink ')"
   ></span> ");
   Ink = Parent.find (". Ink");
   Incase of quick double clicks stop the previous animation Ink.removeclass ("animate"); Set size of. Ink if (!ink.height () &&!ink.width ()) {//use parent ' s width or height whichever is larger For the diameter toMake a circle which can cover the entire element.
    D = Math.max (Parent.outerwidth (), Parent.outerheight ());
   Ink.css ({height:d, width:d}); }//get Click coordinates//logic = Click coordinates relative to Page-parent ' s position relative to Page-half O
   F Self height/width to make it controllable from the center;
   x = E.pagex-parent.offset (). Left-ink.width ()/2;
   y = E.pagey-parent.offset (). Top-ink.height ()/2;
  Set the position and add class. Animate Ink.css ({top:y + ' px ', left:x + ' px '}). addclass ("animate"); }) </script>

The above code is the core code of this article, relatively simple, you can according to the requirements, appropriate to add the deletion code.