JQuery User Manual (5)

Source: Internet
Author: User

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.

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.