jquery review-Dress up pages with animations and effects (queue not organized)

Source: Internet
Author: User

Dress up pages with animations and effects

First, show and hide elements

Set the Style.display property of an element (None/block/inline)

1, simple to change the element display and hide

(1). Show Show ()

(2) hiding hide ()

(3), toggle status Toggle ()

2. Gradient display and hidden elements

(1), display Show (Speed,callback)

(2) Hidden Hide (Speed,callback)

(3), Toggle State Toggle (Speed,callback)

Parameter description:

Speed: A number or string. Can be a few milliseconds, or it can be slow, normal, fast

callback: Called when the animation ends. Sets the function context (this) to the currently executing animation element.

Ii. making elements fade in and out

1, FadeIn (speed, callback)

When you raise the opacity of an element to its initial value, all matching elements appear

2, FadeOut (speed, callback)

By downgrading the opacity of the element to 0%, and then removing the element from the monitor

3, FadeTo (speed, opacity, callback)

Gradually change the opacity of the element, from their current value to the value specified by opacity

Opacity: The target opacity of the element that will be adjusted, the specified range of values is 0.0-1.0

Three, sliding elements up and down

1, Slidedown (speed, callback)

By building up the vertical dimensions of the elements to make all the matching hidden elements that are out, only the hidden elements have an effect

2, Slideup (speed, callback)

Remove matching display elements from the display by progressively reducing the vertical size of elements

3, Slidetoggle (speed, callback)

Executes Slidedown () on any hidden wrapper element and executes Slideup () on any displayed wrapper element

Four, stop the animation

Stop (Clearqueue, gotoend)

Stops all animations that are in progress on the matched element collection

Five, custom Animation

Animate (properties, duration, easing, callback)

Animate (Properties, Options)

Applies the animation specified by the properties and easing parameters to all members of the wrapper set. You can specify a callback function to invoke when the animation is complete.

Properties: Object that specifies the value that the CSS style supported at the end of the animation should reach. The animation is produced by adjusting the current value of the element's style property to the value specified in the hash object (the specified target value can be absolute or relative to the start value.) To specify a relative value, add + = or-= to the target value, representing the relative target of the positive and negative directions, respectively. In addition to specifying the value of the target property, you can also specify one of the following strings: Hide\show\toggle)

duration: Specify the duration of the effect

easing: Specifies the animated slide effect. The core jquery provides two easing functions, linear and swing, respectively.

Common animation style properties include: Top, left, width, height, and opacity

$ ('. Animateme '). each (function () {$ (this). Animate ({width: $ (this). Width () *2,height: $ (this). Height () *2},2000)})


jquery review-Dress up pages with animations and effects (queue not organized)

Related Article

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.