When we animate with the animate () function, here Backgouncolor only with the jquery function library is not implemented, need to introduce the Color animations plug-in (Jquery-ui.min.js), here are some example code:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>animate Color annimation</title>
<script src= ". /js/jquery.min.js "type=" Text/javascript "charset=" Utf-8 "></script>
<!--<script src= "//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js" ></script>-->
<script src= ". /js/jquery-ui.min.js "type=" Text/javascript "charset=" Utf-8 "></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' button '). Click (function () {
var div=$ (' div ');
Div.animate ({top: ' 300px ', backgroundcolor: ' #ADFF2F '},2000);
Div.animate ({left: ' 300px ', backgroundcolor: ' #008B8B '}, ' slow ');
Div.animate ({top: ' 40px ', Height: ' 300px ', opacity: ' 0.5 '},1000);
Div.animate ({left: ' 20px ', Height: ' 100px ', opacity: ' 1 ', fontSize: ' 40px '}, ' slow ');
});
});
</script>
<body>
<button> Start Animation </button>
<div style= "width:100px; height:100px; Background-color: #ADFF2F; Position:absolute; Text-align:center; font-size:20px; " ><p>big</p></div>
</body>
Color animation effect Production
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
