JQuery User Manual (5)

V. Dynamic Effects

Before proceeding to this section, let's take a look at the example. I believe that all the friends who work on the web page will encounter n-level menus. However, when you click a menu button, if its sub-menus are displayed, the sub-menu is hidden. If the sub-menu is hidden, it is displayed. The traditional javascript method is to first use getElementById to retrieve the id of the container where the sub-menu is located and determine the style of the container. whether display is equal to none. If it is equal to none, it is set to block. If it is not equal to none, if the effect is more complex, When you click the button, instead of suddenly hiding and displaying sub-menus, we need to set the height of sub-menus through setTimeout, and then the transparency disappears and appears more smoothly, at this time, a lot of code needs to be written. If the js foundation is poor, you may have to get the code written by others and modify it! JQuery only needs one sentence to implement the above results. $ ("# a"). toggle ("slow"), do I need to copy and modify others' code after learning jQuery? Next we will introduce jQuery's methods for effect processing one by one.

Hide () hides matching objects

<P id = "a"> Hello Again </p> <a href = "#" onClick = '("# "). hide () '> jQuery </a>

When you click Connect, the display of the object with id a changes to none.

Show () show matching objects

Hide (speed) hides matching objects at a certain speed, and its size (length and width) and transparency gradually change to 0. speed has three levels ("slow", "normal ", "fast"), or a custom speed.

Show (speed) displays the matching object at a certain speed. Its size (length and width) and transparency change from 0 to normal.

Hide (speed, callback) show (speed, callback) executes the callback function when the show and hide changes finish.

Toggle () Toggle (speed) if the current matching object is hidden, it will show them. If it is currently displayed, it will be hidden. Toggle (speed), its size (long width) and transparency gradually change.

<A href = "#" onClick = '$ ("img"). toggle ("slow")'> jQuery </a>

Fadein (speeds) fadeout (speeds) adjusts transparency based on the speed to display or hide matching objects. Note that, unlike hide (speed) and show (speed), fadein and fadeout only adjust transparency, do not resize

<a href =" # "onClick = '$ (" img "). fadeIn ("slow") '> jQuery </a>

Click Connect to see the image gradually displayed.

Fadein (speed, callback) fadeout (speed, callback) callback is a function. First, you can adjust the transparency to display or hide matching objects. After the adjustment, run the callback function.

<A href = "#" onClick = '$ ("img "). fadeIn ("slow", function () {alert ("Animation Done. ");}) '> jQuery </a>

After you click Connect, you can see that the image is gradually displayed. The displayed dialog box is displayed.

Fadeto (speed, opacity, callback) adjusts the reverse transparency opacity at the speed of the matching object, and then executes the callback function. Opacity is the final transparency (0-1 ).

<br>
<A href = "#" onClick = '$ ("img "). fadeTo ("slow", 0.55, function () {alert ("Animation Done. ");}) '> jQuery </a>

Let's take a look at the results. If jQuery is not used, there may be a lot of code to write the original javascript script!

Slidedown (speeds) will smoothly change the height of the matching object from 0 to the normal at the specified rate!

<A href = "#" onClick = '$ ("img"). slideDown ("slow")'> jQuery </a>

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

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

Slidetoggle ("slow") if the height of the matched object is normal, it gradually changes to 0. If it is 0, it gradually changes to normal.