动画的演示效果 | 菜鸟工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.statiwww.jyshare.com/libs/jquery/1.10.2/jquery.min.js">
</script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
      var div=$("div");
      div.animate({height:'200px',opacity:'0.3',background-color:'aqua',font-size:'30px'},"slow");
      div.animate({width:"200px",opacity:"0.7",background-color:"pink",text-align:"left"},"slow");
      div.animate({height:"200px",opacity:"0.3",background-color:"bisque",font-size:"20px"},"slow");
      div.animate({width:"200px",opacity:"0.7",background-color:"azure",text-align:"center"},"slow");
    });
    });
  </script>
  
  </head> 
  <body>
    <button>Click Me!</button>
    <div style="background-color:green;width:100px;height:100px;text-align:center;font-size:20px">TEST!</div>
  </body>
</html>
HTML