JQuery use Manual (v) _jquery

Five : Dynamic effect

        Before this part of the first we look at an example, I believe that the friends who make the Web page to meet the situation of N-level menu, but click on a menu button, if its submenu is displayed, then hide the submenu, if the submenu is hidden, then display, The traditional JavaScript practice is to use getElementById to remove the ID of the container in which the submenu is located, to determine if the container's style.display is equal to none, if it is equal to block, if it is not equal to none, If the effect set a little more complex, when the button is clicked, not suddenly hide and show the submenu, but a highly smooth transformation, it is necessary to set the settimeout by the height of the submenu, and then the complexity of the smooth disappearance and appearance of transparency, then appear to need to write a lot of code, If the JS base is not good friends may only be from someone else to write good code to take over to modify! jquery to achieve the above effect only need 1 words on the line, $ ("#a"). Toggle ("Slow"), after learning jquery also need to copy to modify other people's code? Here's how jquery is used for effect processing.

Hide ()   Hide matching objects

<p id= "a">Hello Again</p><a href= "#" OnClick = ' ("#a"). Hide () '>jQuery</a>

When the connection is clicked, the display of the object with ID A is changed to none.

Show () shows matching objects

Hide (speed) hides the matching object at a certain speed, and its size (long width) and transparency gradually change to 0,speed level 3 ("slow", "normal", "fast"), or a custom speed.

Show (speed) displays the matching object at a certain speed, its size (long width) and transparency are gradually changed from 0 to normal

Hide (speed, callback) show (speed, callback) Execute function when display and hide changes are completed callback

Toggle () Toggle (speed) If the current matching object is hidden, display them and, if it is currently displayed, hide, toggle (speed), its size (long width), and transparency are gradually changing.

<img src= "1.jpg" style= "width:150px"/>
<a href= "#" onClick= ' $ ("img"). Toggle ("slow") '>jQuery</A >

FadeIn (speeds) fadeout (speeds) displays or hides matching objects based on speed adjustment transparency, noting that unlike hide (speed) and show (speed), fadeIn and fadeout only adjust transparency and do not resize

<img src= "1.jpg" style= "Display:none"/><a href= "#" OnClick = ' $ (' img '). FadeIn ("slow") '> jQuery </a>

Click on the connection to see the picture gradually displayed.

FadeIn (speed, callback) fadeout (speed, callback) callback as functions, first show or hide matching objects by adjusting transparency, and execute callback function when the adjustment is finished

<img src= "1.jpg"/>
<a href= "#" onClick= ' $ ("img "). FadeIn ("Slow", function () {alert ("Animation done.");}) ' > jQuery </a>

When you click on the connection, you can see the picture gradually displayed, the Full pop-up dialog box

Fadeto (speed, opacity, callback) adjusts the speed of the matching object to the speed at which it will be resized opacity, and then executes the function callback. Opacity is the final display of transparency (0-1).

<img src= "1.jpg"/><br>
<a href= "#" onClick= ' $ ("img "). Fadeto ("Slow", 0.55,function () {alert ("Animation Done. ");} > jQuery </a>

You can look at yourself to see the effect, if not jquery, write the original JavaScript script may be a lot of code!

Slidedown (speeds) will match the height of the object from 0 to the specified rate of smooth change to normal!

<img src= "1.jpg" style= "Display:none"/>
<a href= "#" onClick= ' $ ("img "). Slidedown ("slow") '>jQuery</ a>

Slidedown (speeds,callback) changes the height of the matching object from 0 to normal! Execute function callback after change ends

Slideup ("Slow") slideup (speed, callback) the height of the matched object changed from normal to 0

Slidetoggle ("slow") if the height of the matching object gradually changes to 0, if 0, then gradually change to normal