jquery animation effect Daquan _jquery

Here are some ways to animate the effects, as follows:

1, Show () display effect

Syntax: Show (speed,callback) number/string,function speend for animation execution time, in milliseconds. It can also be slow ", normal", "fast" callback optional, for functions that are executed when the animation completes.

Show (speed,[easing],callback) number/string easing default is swing, optional linear;

$ ("#div1"). Show (3000,function () {alert ("Animated show Complete!");

　　　　

2, Hide () hidden effect

Syntax: Hide (speed,callback) number/string,function

Hide (Speed,easing,callback) number/string

 $ ("#div1"). Hide (3000,function () {alert ("animated Hide Complete")});

3, Toggle () Hidden display automatically switch, when the current display is hidden, when the current is hidden display

Syntax: Toggle (speed,callback) number/string,function

Toggle (Speed,callback) number/string,string,function

 $ ("#div1"). Toggle (3000,function () {alert ("Animation effect Toggle Complete")});

4, Slidedown () downward display, slow () is horizontal and vertical direction at the same time, and Slidedown is only in the vertical direction of the downward expansion

Syntax: Slidedown (speed,callback) number/string,function

Slidedown (Speed,[easing],callback) number/string,function

$ ("#div1"). Slidedown (3000,function () {alert ("Expand to show Success!");

5, Slideup () hidden Up, hide () is horizontal and vertical two direction, and Slideup () is only vertical upward hide

Syntax: Slideup (speed,callback) number/string,function

Slideup (Speed,[easing],callback) number/string,string,function

 $ ("#div1"). Slideup (3000,function () {alert ("Close Up hide success!");}

6, Slidetoggle in the vertical direction of the switch, toggle is horizontal and vertical two direction, and Slidetoggle is only vertical direction.

Syntax: Slidetoggle (speed,callback) number/string,function

Slidetoggle (Speed,[easing],callback) number/string,string,function

 $ ("#div1"). Slidetoggle (3000,function () {Alert (toggle success horizontally);});

7, FadeIn () to change the transparency to display

Syntax: FadeIn (speed,callback) number/string,function

FadeIn (Speed,[easing],callback) number/string,function

$ ("#div1"). FadeIn (3000,function () {alert ("Fade in Successful!");

8, fadeout () to change the transparency to hide

Syntax: fadeout (speed,callback) number/string,function

Fadeout (Speed,[easing],callcack) number/string,string,function

 $ ("#div1"). Fadeout (3000,function () {alert ("Fade out hidden success!");

9, Fadetoggle () to change the transparency to toggle the display of hidden state

Syntax: Fadetoggle (speed,callback) number/string,function

Fadetoggle (Speed,[easing],callback) number/string,function

 $ ("#div1"). Fadetoggle (3000,function () {alert ("Fade switch succeeded!");

10, Fadeto () change the transparency to the specified transparency by the specified time

Syntax: Fadeto (speed,callback) number/string,function

Fadeto ([SPEED],OPACITY,[EASING],[FN]) number/string,float,string,function

$ ("#div1"). Fadeto (3000,0.22,function () {alert ("Transparency changed successfully!");

11, animate () Custom animation, in general, digital changes can be used for animation.

Grammar: Animate (Params,speed,easing,callback); Style parameters, time, selectable, functions

$ ("#div1"). Animate ({width:300px,height,300px},3000);

The CSS style parameters that you can use in params to enclose them in brackets. Pay attention to the use of camel rules, such as Font-size to write FontSize. Color gradients are not supported.

Backgroundposition
BorderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
Borderspacing
Margin
MarginBottom
MarginLeft
MarginRight
MarginTop
Outlinewidth
Padding
Paddingbottom
Paddingleft
Paddingright
Paddingtop
Height
Width
MaxHeight
MaxWidth
MinHeight
MaxWidth
Font
FontSize
Bottom
Left
Right
Top
Letterspacing
wordspacing
Lineheight
Textindent

12, Stop () is performing animation

Stop ([clearqueue],[gotoend]); All two parameters are Boolean, the first indicates whether to stop the animation, the second, if it stops, whether it immediately becomes the state of completion, or if it is set to No, then the state of execution half.

$ ("#div1"). Hide (5000)//This animation is executing

$ ("#div1"). Stop ();　　The previous line of code specifies that the animation stops at half state

$ ("#div1"). Stop (True,true); Stops the current animation while the animation transitions to completion state.

13, delay () delay animation when an animation stop () can also use delay () to delay execution. Continue execution from the stop position. Of course, with the original method to continue to perform, but no delay effect.

Delay (Duration,[queuename]) sets a delay value to perform the animation integer,string

$ ("#div1"). Delay (3000). Hide (3000); Represents the execution of hide (3000) after 3000 milliseconds;

14, jquery.fx.off//This property is only to close the current page of the animation, after the animation is turned off, no animation effect, all set the execution time animation will be completed instantaneously. Notice where this property appears. The locations that appear vary in the range of effects.

$ (function () {

JQuery.fx.off = true; Property outside the event, all animations that are executed after the page is loaded are valid

$ ("#div1"). Click (function () {//property if written here, only invalid for the current Click event, does not affect the animation of other events

$ ("#div1"). hi　　De (3000);　　　　 Note that because the JQuery.fx.off is set to True, 3000 milliseconds is invalidated, equivalent to hide ();

});

})

15. JQuery.fx.interval//This property sets the frame rate of the animation, in milliseconds, and smoother if the setting is smaller. , the location of the attribute appears to have an impact range

$ (function () {

jQuery.fx.interval = 1000;

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

$ ("#div1"). Hide (3000);　JQuery.fx.interval is set to 1000, or 1 seconds, to change the effect.　　

});

})

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.