JavaScript jQuery-5 jQuery animation effects (hidden and displayed, custom animations, concurrency and arrangement effects)

First, jQuery hidden and displayed

Basic display, Hidden effect

-Show ()/Hide ()

-function: Display or hide by changing the width and height of the element at the same time

-Usage: $obj. Show (Execution time, callback function);

Execution time: slow,normal,fast or milliseconds

callback function: The function to execute after the animation has finished executing

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7E/72/wKioL1cApbmjGLlrAABA3NWu69g412.png "title=" Web.png "alt=" Wkiol1capbmjgllraaba3nwu69g412.png "/>

Slide animation effect

-Slidedown ()/Slideup ()

-Effect: Show or hide the effect by changing the height

-Usage with show ()/Hidden ()

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/76/wKiom1cAqCuxcRRBAABD4jEv6cc326.png "title=" Web.png "alt=" Wkiom1caqcuxcrrbaabd4jev6cc326.png "/>

Fade-in animation effects

-FadeIn ()/FadeOut ()

-function: Display or hide by changing the opacity opacity

-Usage with Show/hide

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/72/wKioL1cAqWSgUme2AABBGhx3INg852.png "title=" Web.png "alt=" Wkiol1caqwsgume2aabbghx3ing852.png "/>

Ii. JQuery Custom Animations

Creating a Custom Animation

-Animate ()

-Usage: Animate (JS object, execution time, callback function)

-js object: {} describes the style of the element after the animation is executed

-Execution time: number of milliseconds

-Callback function: The function to be executed after the animation execution is finished

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7E/76/wKiom1cAqcqweJH6AABR1UpdhAE775.png "title=" Web.png "alt=" Wkiom1caqcqwejh6aabr1updhae775.png "/>

Third, jQuery concurrency and queuing effect

Working with a set of elements

-When using multiple effects for the same set of elements, you can queue them by concatenating these effects

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/72/wKioL1cAquSRtagUAABE0ZM1-eo935.png "title=" Web.png "alt=" Wkiol1caqusrtaguaabe0zm1-eo935.png "/>

Summary: This chapter mainly describes the JQuery animation effect (hide and show, custom animation, concurrency and arrangement effects)

This article from the "Flying Ants" blog, declined to reprint!

JavaScript jQuery-5 jQuery animation effects (hidden and displayed, custom animations, concurrency and arrangement effects)