Home > Developer > Web Develop
I. Methods of Use
1, $ ("div"). Animate ({width: "300px"});
$ ("div"). Animate ({' width ': ' 300px '});
$ ("div"). Animate ({' width ': 300+"px"});
$ ("div"). Animate ({' Width ': 300});
$ ("div"). Animate ({width:300});
The above five methods have the same effect
Note: (1) attribute values need to be enclosed in quotation marks, as in the first three methods the string ' px ' is enclosed in quotation marks.
However, the value is not required, as 300 of the 45th method does not require quotation marks, which do not differentiate between single and double quotes .
(2) attribute names can be wrapped without quotation marks, which do not differentiate between single and double quotes.
(3) The default is ' px ' when the attribute value of a numeric type does not add units.
2, $ ("div"). Animate ({width: "300px", fontsize:30});
(1) Font-size this attribute with a horizontal line in the middle requires the horizontal line to be removed, but the first letter of the second word needs to be capitalized.
(2) When multiple attributes are placed inside {}, they need to be separated by commas.
3, $ ("div"). Animate ({width: ' 300px ',fontsize:30,backgroundcolor: ' Red '},500);
(1) The above 2 refers to the middle with a horizontal line of the attribute to remove the horizontal line, and so on, in this case backgroundcolor the same , but animate itself can not set the color and other properties, you need to introduce the following JS to use:
<script src= "Jquery.animate-colors.js" ></script>
: http://www.bitstorm.org/jquery/color-animation/
(2) animate ({},500) indicates that the animation was executed for 5 seconds.
(3) Example:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<script src= "Jquery.js" ></script>
<script src= "Jquery.animate-colors.js" ></script>
<style>
. Div span{
Display:block;
width:100px;
height:200px;
border:1px solid black;
Cursor:pointer;
}
</style>
<body>
<div class= "div" >
<span>demo</span>
</div>
<script>
$ ('. Div span '). Click (function () {
$ (this). Animate ({fontsize:30,width:300+ ' px ', backgroundcolor: ' Red '},500);
});
</script>
</body>
4, $ ("div"). Animate ({width: "1000px"},5000,function () {alert ("pops up the box after the animation is completed")});
This example refers to the function functions () that are called after 5 seconds of animation.
Second, not all of the properties in CSS can be dynamically changed with animate, the following summarizes some of the properties that can manipulate elements:
* backgroundposition
* BorderWidth
* borderBottomWidth
* borderLeftWidth
* borderRightWidth
* borderTopWidth
* borderspacing
* Margin
* Marginbootom
* MarginLeft
* MarginRight
* MarginTop
* Outlinewidth
* Padding
* Paddingbottom
* Paddingleft
* Paddingright
* Paddingtop
* Height
* Width
* MaxHeight
* MaxWidth
* MinHeight
* MinWidth
* Font
* FontSize
* Bottom
* Left
* Right
* Top
* letterspacing
* wordspacing
* Lineheight
* Textindent
* Opacity
Third, the relevant web site
http://www.bitstorm.org/jquery/color-animation/
https://github.com/jquery/jquery-color/
Http://runjs.cn/detail/xmax7vo3
http://blog.csdn.net/goodshot/article/details/8648706
Use of animate in jquery 0.0
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
