Animate animate in jquery (bottom)

Last Update:2017-09-10 Source: Internet

Author: User

Tags set time

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Animate animate in jquery (bottom)

Animate in the execution of animation, if you need to observe some of the animation performance, or at some point in the animation to do some other processing, we can be provided by animate the second set of syntax, passing an object parameter, you can get animation execution status some notifications

. Animate (Properties, Options)

Options parameters

Duration-set time for animation execution
Easing-Specifies the easing function to use, and which easing function to use for the transition
Step: Specifies the function to be executed after each animation step is completed
Progress: This callback is executed every time the animation is called, which is a concept of progress
Complete: Animation Completion callback

One of the key points is:

If more than one element is animated, the callback executes once on each matched element, not once as an entire animation

List the common ways:

$ (' #elem '). Animate ({width: ' toggle ',  height: ' Toggle '}, {duration:5000, specialeasing: {width: ' Linear ', Height: ' easeoutbounce '}, Complete:function () {$ (this). After (' <div>animation.    </div> '); }  });

Reference code:

<!DOCTYPE HTML><HTML><Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <title></title>    <style>P{Color:Red;    }Div{width:200px;Height:100px;Background-color:Yellow;Color:Red;    }a{Display:Block}    </style>    <Scriptsrc= "Http://libs.baidu.com/jquery/1.9.1/jquery.js"></Script></Head><Body>    <H2>Animate (bottom)</H2>    <P>MU-Class network, dedicated to share</P>    <DivID= "Aaron">Internal animations</Div>Click to observe the animation effect:<SelectID= "Animation">        <optionvalue= "1">Animated Step Animation</option>        <optionvalue= "2">Animation Progress Callback</option>    </Select>    <a></a>    <inputID= "Exec"type= "button"value= "Perform animation">    <Scripttype= "Text/javascript">    $("#exec"). Click (function() {        varv= $("#animation"). Val (); var$aaron= $("#aaron"); if(v== "1") {            //observe the changes in each animation$aaron. Animate ({//Final StateHeight:' -'}, {duration: -,                //Each animation will be calledStep:function(now, FX) {$aaron. Text ('Height Change value:'+Now )} })        } Else if(v== "2") {            //observe the changes in each progress$aaron. Animate ({height:' -'}, {duration: -,                //a function called after each step of the animation is completed,                //Each animation element executes a separate function, regardless of the number of animation attributesProgress:function(now, FX) {$aaron. Text ('Progress:'+arguments[1])                    //var data = fx.elem.id + ' + fx.prop + ': ' + now;                    //alert (data)                }            })        }     }); </Script></Body></HTML>

Step:function (A, A, b) indicates that the function executes after every step of each animation is completed.
The two parameters within the function, a indicates that the property being changed is worth the current value (for example, now of the first animation in this example represents the current value of the changing Heigh "not the height change value Oh ~ ~ ~"); B represents a reference to the prototype object, and this prototype object includes many properties, such as The element that performs the animation elem; the animation is changing the property prop; Changing the current value of the property: now; wait, wait.
You can try to change the $aaron.text (' height changed value: ' +now) to +fx.elem, or ++fx.prop to observe the changes after the animation, you can almost understand ~ ~

Animate animate in jquery (bottom)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More