Home > Developer > Web Develop
1. Parameter Description:
Animate (PARAMS,[SPEED],[EASING],[FN])
Params: A set of style properties and their values that are included as animated and final values <br/>
Speed: A string of three predetermined speeds ("slow" 600ms, "normal" 400ms, or "fast" 200ms) or a millisecond value that represents the duration of the animation (for example: £) <br/>
Easing: The name of the erase effect to use (requires plug-in support). The default jquery provides "linear" and "Swing" .<br/>
fn: The function that executes when the animation is complete, once for each element. <br/>
2. Note:
1. Let the element do relative motion by specifying "<em>+=</em>" or "<em>-=</em>" in front of the attribute value. such as: Left: " -50px", indicating that the relative position to move 50px;
The target object's position:relative should be set to this property value, otherwise invalid.
2. All specified properties must be in camel form, for example with MarginLeft instead of Margin-left.
3. All properties that animate can be created must be a single value, such as width, height, left, transparency (opacity), etc.
But it can't be background-color.
Note: To animate colors, you must use the Jquery.color () plug-in. Unless otherwise specified, the units of these properties are processed in pixels, and other units that can be used include EM and% percentages.
4, opacity: "Show" means 1 or "hide" means 0 or "0.4 decimal"
3. Sample code:
<!doctype html>
<meta charset= "Utf-8" >
<title> Demo Custom Animate method Effects </title>
<script src= ". /jquery/jquery-3.1.0.min.js "></script>
<script>
$ (function () {
$ ("#idleft"). Click (function () {
$ ("#idsection"). Animate ({left: "+200px"}, "slow");//Shift right in relative position
})
$ ("#idheight"). Click (function () {
$ ("#idsection"). Animate ({marginleft:+200,height:200,width:200,borderwidth:50,fontsize:50,opacity:0.3},1000);// Length defaults to pixel units
})
})
</script>
<body>
<input type= "button" value= "height" id= "idheight" >
<input type= "button" value= "left" id= "Idleft" >
<section style= "Width:50px;height:50px;background-color: #999;p osition:relative" id= "Idsection" > Demo </ Section>
</body>
Parse jquery effect function animate ()
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
