Home > Developer > Web Develop
Some of the more complex animations are not achievable by using a few of the animation functions that have been learned before, and a powerful animate method is required.
Manipulate an element to perform a 3-second fade-in animation, comparing the differences between the 2 set of animation settings
$ (elem). FadeOut ($) $ (elem). Animate ({ opacity:0},3000)It is obvious that the animate method is more flexible and can precisely control style properties to perform animations
Grammar:
. Animate (Properties, [duration], [easing], [complete]). Animate (Properties, Options)
The. Animate () method allows us to create animations on the CSS properties of any numeric value. 2 grammars are used, almost almost, and the only necessary property is a set of CSS property key-value pairs. This set of properties is similar to the property key-value pair used to set the. css () method, except that the attribute scope makes more restrictions. The second argument can start by passing more than one argument, or it can be combined into an object to pass the
Parametric decomposition:
Properties: An object that consists of key-value pairs of one or more CSS properties. It is important to note that all properties used for animation must be numeric, unless otherwise noted, and those properties that are not numeric will not be able to use the basic jquery functionality. such as common, border, margin, padding, width, height, font, left, top, right, bottom, wordspacing, and so on, these are can produce animation effect. Background-color is obviously not possible, because the parameters are red or gbg such values, very use plug-ins, otherwise it is normally not only animated effect. Note that CSS styles are set using DOM names (such as "fontSize") rather than CSS names (such as "font-size").
Pay special attention to units, attribute values in units of pixels (px), unless otherwise noted. Units em and% need to be specified using
. Animate ({ left:50, width: ' 50px ' opacity: ' Show ', fontSize: "10em",}, 500);In addition to defining values, each property can use ' show ', ' Hide ', and ' toggle '. These shortcuts allow custom hiding and display animations to control the display or hiding of elements
. Animate ({ width: "Toggle"});If you provide a value starting with + = or-=, the target value is calculated with the current value of the attribute plus or minus the given number.
. Animate ({left: ' +=50px '}, "slow");Duration time
The time, in milliseconds, that the animation executes, and the larger the value, the slower the animation is performing, the faster it is. You can also provide ' fast ' and ' slow ' strings, representing durations of 200 and 600 milliseconds, respectively.
The algorithm of easing animation motion
Swing is called by default in the jquery library. If you need additional animation algorithms, look for the relevant plugin
Complete callback
The function that is executed when the animation is completed, which guarantees that the current animation will trigger when it is determined to complete.
Specifically, you can refer to the following code effects:
<!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; } </style> <Scriptsrc= "Http://libs.baidu.com/jquery/1.9.1/jquery.js"></Script></Head><Body> <H2>Animate (top)</H2> <P>MU-Class network, dedicated to share</P> <DivID= "Aaron">Internal animations</Div>Click to observe the animation effect:<SelectID= "Animation"> <optionvalue= "1">Animation 1</option> <optionvalue= "2">Animation 2</option> <optionvalue= "3">Animation 3</option> <optionvalue= "4">Animation 4</option> </Select> <inputID= "Exec"type= "button"value= "Perform animation"> <Scripttype= "Text/javascript"> $("#exec"). Click (function() { varv= $("#animation"). Val (); var$aaron= $("#aaron"); if(v== "1") { //the units of the values are PX by default$aaron. Animate ({width: -, Height: - }); } Else if(v== "2") { //100px on the basis of existing heights$aaron. Animate ({width:"+=100px", Height:"+=100px" }); } Else if(v== "3"{$aaron. Animate ({fontSize:"5em" }, -, function() {alert ("animation fontsize execution finished!"); }); } Else if(v== "4") { //switching heights with the toggle parameter$aaron. Animate ({width:"Toggle" }); } }); </Script></Body></HTML>
CSS style css{"FontSize", 15px} or css{"Font-size", 15px} are all OK, but with the latter you must have double quotes.
15px this, either, directly using 15, at the bottom will automatically add PX to you, or., 15px to enclose the quotation marks, or jquery is not recognized, it will be treated as an invalid character.
JQ Official statement: Animate cannot operate on Bakcground and BackgroundColor
Animate animate in jquery (top)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
