Example Analysis of jQuery animation effect-related methods and jquery instance analysis

Example Analysis of jQuery animation effect-related methods and jquery instance analysis

This article describes how to use jQuery animation effects. 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;
Copy codeThe Code is as follows: $ ("# div1"). show (3000, function () {alert ("the animation display is complete! ");});

2. hide ()

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

Hide (speed, easing, callback) Number/String
Copy codeThe Code is as follows: $ ("# div1"). 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
Copy codeThe Code is as follows: $ ("# div1"). 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
Copy codeThe Code is as follows: $ ("# div1"). 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
Copy codeThe Code is as follows: $ ("# div1"). 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
Copy codeThe Code is as follows: $ ("# div1"). 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
Copy codeThe Code is as follows: $ ("# div1"). 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
Copy codeThe Code is as follows: $ ("# div1"). 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
Copy codeThe Code is as follows: $ ("# div1"). 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
Copy codeThe Code is as follows: $ ("# div1"). 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
Copy codeCode: $ ("# div1"). 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.

$ ("# Div1 "). hide (5000) // This animation is being executed $ ("# div1 "). stop (); // The animation specified by the previous Code stops in half state $ ("# div1 "). 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
Copy codeThe Code is as follows: $ ("# div1"). delay (3000). hide (3000); // indicates that hide (3000) is executed 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; // The property is outside the event and valid for all animations executed after the page is loaded $ ("# div1 "). 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 $ ("# div1 "). 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; $ ("# div1 "). click (function () {$ ("# div1 "). 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.

Articles you may be interested in:

• Image thumb up + 1 animation effect implemented by jQuery (with Online demo and demo source code download)
• JQuery-implemented likes to display animation effects with random numbers (with online demonstration and demo source code download)
• JQuery's simple implementation of QQ space thumb ups has been canceled
• Demo of jQuery animation display and hiding effect (with demo source code download)
• Share some common jQuery animation events and animation Functions
• JQuery implements Page Transition animation Switching
• JQuery implements level-2 folding menu code with animation fade-out effect
• Jquery implements code at the pop-up layer for simulating Sina Weibo animation effects (can be closed or dragged)
• Analysis of continuous animation effects using jQuery
• Analysis of super simple thumb ups implemented by jQuery