The animation of jquery learning

One, show () and Hide ()

The show () and Hide () methods are equivalent to CSS ("display", "None/block/inline") in the case of no parameters,

The effect is to hide or display the matching elements immediately, without any animations.

If you need to drive the drawing, you can add the parameter to the show () method

exp:$ (' #id '). Show ("slow");

$ (' #id '). Show (1000);//1000 MS, equivalent to 1 seconds

II, FadeIn () and fadeout ()

These two methods only change the transparency of the element, and FadeOut () decreases the opacity of the element for a specified period of time until

The element disappears completely ("Display:none"); FadeIn () is just the opposite.

Three, Slideup () and Slidedown ()

These two methods will only change the height of the element

Four, custom animate animate ()

You can customize the animation while changing the height, width, and opacity of the element.

Animate (Params,speed,callback)

Params: A containing style and worth mapping {property1: "value1", Property: "Value2"}

Speed: Velocity parameters, optional

Callback: function when the animation finishes executing, optional

$ (function () {

$ ("#panel"). Click (function () {

$ (this). Animate ({left: "+=500px"},300); Accumulate 500px at current position

});

})

Five, animation callback function

Change the style of an element when the last step of the animation

$ (function () {

$ ("#panel"). Click (function () {

$ (this). Animate ({left: "+=500px", Opacity: "1"},300);

. Animate ({top: "200px", Width: "200px"},3000,function () {

$ (this). CSS ("Border", "5px solid Blue");

});

})

Six, stop the animation and judge whether it is in an animated state

1, stop animation of elements

Stop ([Clearqueue],[gotoend])

Clearqueue whether to empty the non-executed animation queue

Gotoend whether the animation being executed will jump to the end state directly

2, determines whether the element is in an animated state

if (!$ (Element). Is (": Animated")) {

If no animation is currently in progress, add a new element

}

3, delayed animation delay ()

Seven, other animation methods

Toggle ()

Toggle Visible State

Slidetoggle ()

Toggle the visibility of elements with height changes

FadeTo ()

You can adjust the opacity of an element to a specified value in a progressive way

Fadetoggle

Toggle the visibility of an element by means of transparency

The animation of jquery learning