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

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.

Parameters:
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)