天天看點

Nearth===>WEB前端--第18課/JQuery/基本動畫操作--animate()以及回調函數的使用

基本動畫操作--animate()以及回調函數的使用:​​(自己參考菜鳥教程網站進行學習,點選,進行學習·····)​​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nearth</title>
    <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
      #dv{
        height: 50px;
          width:50px;
        background-color: #FF0000;
      }
    </style>
    <script type="text/javascript">
      $(function(){
        $("#btn").click(function(){
          $("#dv").animate(
          {
            "width":"300px",
            "height":"300px",
            "left":"300px",
          },1000,function(){
            $("#dv").animate({
              "width":"50px",
              "height":"50px",
              "left":"300px",
            },1000)}
          );
        });
      })
    </script>
    
  </head>
  <body>
    <h1>基本動畫操作--animate()以及回調函數的使用</h1>
    <hr >
    <input type="button" name="" id="btn" value="顯示動畫效果" />
    <hr >
    <div id="dv">
    </div>
  </body>
</html>      

每天做點事,也是蠻開心的································

繼續閱讀