Introduction to the use of jquery animated animate methods

Source: Internet
Author: User

The function used to create the custom animation.
return value: JQuery animate (params, [duration], [easing], [callback])

If you are using a string value such as "Hide," "Show," or "toggle," the default animated form is called for the property. Paramsoptions a group of packages

Contains a collection of style attributes and their values as animated and final values

Params object {}, note: All specified properties must be in camel form, for example with MarginLeft instead of margin-left, if you are using "hide",

A string value such as "show" or "toggle", the default animated form is called for the property.

Duration (optional) A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)

Easing (optional) the name of the erase effect to use for string (requires plug-in support). Default jquery provides "linear" and "swing"

Callback (optional) function to execute when the animation is complete

0. Stop the animation

if ($ ('. Swaplist,.mainlist '). Is (': Animated ')) {    $ ('. Swaplist,.mainlist '). Stop (true,true);}


Animate instances:
1. Several different attributes of the DIV element change after clicking the button

$ ("#go"). Click (function () {    $ ("#block"). Animate ({        width: "90%",        Height: "100%",        fontSize: "10em",        borderwidth:10    }, 1000);});

2. Let the specified element move around

$ ("#right"). Click (function () {    $ (". Block"). Animate ({left: ' +50px '}, "slow");}); $ ("#left"). Click (function () {    

3. Toggle the height and transparency of paragraphs within 600 milliseconds

$ ("P"). Animate ({    height: ' Toggle ', opacity: ' Toggle '}, "slow");

4. Use 500 milliseconds to move the paragraph to the left 50 and show it clearly (transparency is 1)

$ ("P"). Animate ({    left:50, opacity: ' Show '}, 500);

5. Toggle Show Hidden

$ (". Box h3"). Toggle (function () {     $ (this). Next (". Text"). Animate ({height: ' Toggle ', opacity: ' Toggle '}, "slow");         $ (this). AddClass ("arrow");         return false;     },function () {         $ (this). Next (". Text"). Animate ({height: ' Toggle ', opacity: ' Toggle '}, "slow");         $ (this). Removeclass ("arrow");         return false;     

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.