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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.