JQuery animation effect-related method Example Analysis _ jquery

This article mainly introduces jQuery animation effect-related methods, and analyzes in detail the common methods and precautions for jQuery animation effect based on examples, for more information about jQuery animation effects, see the following examples. We will share this with you for your reference. The details are as follows:

1. show () Display Effect

Syntax: show (speed, callback) Number/String. Function speend indicates the animation execution time, in milliseconds. It can also be slow "," normal ", or" fast "callback, which is the function executed when the animation is completed.

Show (speed, [easing], callback) Number/String easing is swing by default, optional linear;

The Code is as follows:

$ ("# P1"). show (3000, function () {alert ("animation display complete! ");});

2. hide ()

Syntax: hide (speed, callback) Number/String, Function

Hide (speed, easing, callback) Number/String

The Code is as follows:

$ ("# P1"). hide (3000, function () {alert ("animation hiding completed ")});

3. toggle () Hide display automatic switch. Hide the current display.

Syntax: toggle (speed, callback) Number/String, Function

Toggle (speed, callback) Number/String, String, Function

The Code is as follows:

$ ("# P1"). toggle (3000, function () {alert ("animation effect switching completed ")});

4. slideDown (): slow () is to expand horizontally and vertically, while slideDown is to expand downward only in the vertical direction.

Syntax: slideDown (speed, callback) Number/String, Function

SlideDown (speed, [easing], callback) Number/String, Function

The Code is as follows:

$ ("# P1"). slideDown (3000, function () {alert ("show down successfully! ");});

5. slideUp () is hidden up. hide () is horizontal and vertical, while slideUp () is only vertically hidden up

Syntax: slideUp (speed, callback) Number/String, Function

SlideUp (speed, [easing], callback) Number/String, String, Function

The Code is as follows:

$ ("# P1"). slideUp (3000, function () {alert ("hide up successfully! ");})

6. slideToggle switches vertically. toggle is horizontal and vertical, while slideToggle is only vertical.

Syntax: slideToggle (speed, callback) Number/String, Function

SlideToggle (speed, [easing], callback) Number/String, String, Function

The Code is as follows:

$ ("# P1"). slideToggle (3000, function () {alert ("switching horizontally succeeded ");});

7. fadeIn () is displayed to change the transparency.

Syntax: fadeIn (speed, callback) Number/String, Function

FadeIn (speed, [easing], callback) Number/String, Function

The Code is as follows:

$ ("# P1"). FadeIn (3000, function () {alert ("Fade in successfully! ");});

8. fadeOut () is hidden by changing the transparency

Syntax: fadeOut (speed, callback) Number/String, Function

FadeOut (speed, [easing], callcack) Number/String, String, Function

The Code is as follows:

$ ("# P1"). fadeOut (3000, function () {alert ("Fade out hidden successfully! ");});

9. fadeToggle () is used to change the transparency to switch the display hiding state.

Syntax: fadeToggle (speed, callback) Number/String, Function

FadeToggle (speed, [easing], callback) Number/String, Function

The Code is as follows:

$ ("# P1"). fadeToggle (3000, function () {alert ("fade in and fade out switching successful! ");});

10. fadeTo () changes the transparency to the specified transparency at the specified time.

Syntax: fadeTo (speed, callback) Number/String, Function

FadeTo ([speed], opacity, [easing], [fn]) Number/String, Float, String, Function

The Code is as follows:

$ ("# P1"). fadeTo (3000, 0.22, function () {alert ("Transparency changed successfully! ");});

11. animation () Custom Animation. Generally, numeric changes can be used for animation.

Syntax: animate (params, speed, easing, callback); style parameter, time, selectable, Function

The Code is as follows:

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

Params must be enclosed in brackets and can be used with css style parameters. Pay attention to the use of camel rules, such as font-size should be written as fontSize. Color gradient is 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 () to stop an animation being executed

Stop ([clearQueue], [gotoEnd]); both parameters are boolean values. The first parameter indicates whether to stop the animation and the second parameter indicates whether to stop the animation, whether the execution is completed immediately. If it is set to no, the execution is half done.

$ ("# P1 "). hide (5000) // This animation is being executed $ ("# p1 "). stop (); // The animation specified by the previous Code stops in half state $ ("# p1 "). stop (true, true); // stop the current animation, and switch the animation to the completed execution status.

13. delay () Delays animation execution. When an animation stops (), it can also be delayed by delay. Continue from the stop position. Of course, the original method cannot be used to continue execution, but there is no delay effect.

Delay (duration, [queueName]) sets a delay value to execute the animation Integer, String

The Code is as follows:

$ ("# P1"). delay (3000). hide (3000); // indicates to execute hide (3000) After 3000 milliseconds );

14. jQuery. fx. off // specifies whether to disable the animation on the current page. After the animation is disabled, no animation effect is displayed. All the animations with the execution time set will be completed instantly. Note the location where this attribute appears. Different locations have different impact ranges..

$ (Function () {jQuery. fx. off = true; // attribute outside the event, valid for all animations executed after page loading $ ("# p1 "). click (function () {// If the attribute is written here, it is only invalid for the current click Event and does not affect the animation of other events $ ("# p1 "). hide (3000); // note that due to jQuery. fx. off is set to true, So 3000 MS is invalid, which is equivalent to hide ();});})

15. jQuery. fx. interval // set the animation Frame Rate in milliseconds. The smaller the set time, the smoother it will be ., The location where the attribute appears has the same impact scope.

$ (Function () {jQuery. fx. interval = 1000; $ ("# p1 "). click (function () {$ ("# p1 "). hide (3000); // jQuery. fx. set interval to 1000, that is, 1 second, and change the effect once. });})

I hope this article will help you with jQuery programming.