Animate animate in jquery (bottom)

Source: Internet
Author: User
Tags set time

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)

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.