jquery's animated effect show () ... animate ()

The animated effect of jquery

1. Show () display effect

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

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

$ ("#div1"). Show (3000,function () {alert ("Animated display completed!");});

　　　　

2, Hide () hidden effect

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

Hide (Speed,easing,callback) number/string

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

3, Toggle () Hidden display automatic switch, when the current display is hidden, when currently hidden is displayed

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

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

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

　　　　　

4, Slidedown () down, slow () is horizontal and vertical, while Slidedown is only in the vertical direction of the expansion

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

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

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

5, Slideup () hide upward, hide () is horizontal and vertical in two directions, while Slideup () is only vertically upward hide

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

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

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

6, Slidetoggle 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 ("Switch success horizontally");});

　　　　

7, FadeIn () to change the transparency to show

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

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

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

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 hidden state

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

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

$ ("#div1"). Fadetoggle (3000,function () {alert ("Fade in and fade out successfully!");});

10, FadeTo () changes the transparency from the specified time to the specified transparency

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, the number of changes can be used for animation.

Syntax: Animate (Params,speed,easing,callback); Style parameters, time, selectable, function

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

Where the params is to be enclosed in brackets, you can use the CSS style parameters. Pay attention to the camel rule, 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 () stops performing animations

Stop ([clearqueue],[gotoend]); Two parameters are Boolean values, the first indicates whether to stop the animation execution, the second representation, if stopped, immediately becomes the completion of the state, if set to No, then stay in half the state of execution.

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

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

$ ("#div1"). Stop (True,true); Stops the current animation while the animation switches to the completed execution state.

13, Delay () deferred execution animation when an animation stop () is also able to delay execution with delay (). Resumes execution from the stop position. Of course, the original method to continue execution is not, but there is no delay effect.

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

$ ("#div1"). Delay (+). Hide (3000); Indicates that hide (3000) is executed after 3000 milliseconds;

14, JQuery.fx.off//This property simply closes the animation on the current page, and after the animation is turned off, there is no animation effect, and all animations that have the execution time set are completed instantaneously. Note the location where this property appears. The locations that appear vary in the range of influences.

$ (function () {

JQuery.fx.off = true; property is outside the event and is valid for all animations performed after the page is loaded

$ ("#div1"). Click (function () {///attribute if it is written here, only the current click event is invalid and does not affect the animation of other events

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

});

})

15, JQuery.fx.interval//This property sets the frame rate of the animation, in milliseconds, and if the time is set less, the smoother. , the position where the attribute appears also has an impact range

$ (function () {

JQuery.fx.interval = 1000;

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

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

});

})

　　

Inverse Heart

Source: http://www.cnblogs.com/kissdodog/archive/2012/12/08/2808799.html

jquery's animated effect show () ... animate ()