jquery運動

時間 2021-05-30

標籤 javascript css html java jquery json 框架 ide 函數動畫欄目 JQuery 简体版

原文原文鏈接

在前面封裝的move.js框架，在jquery中有一樣封裝好的功能animate()。使用方法很是相似，下面咱們看看animate的使用方法，有了原生的運動方法，而後再使用jquery的運動方法就會變得很是簡單。javascript

animate()語法

$(selector).animate({params},speed,callback);

必需的params參數定義造成動畫的css屬性。
可選的speed參數規定效果的時長。它能夠取如下值「slow」，「fast」或毫秒。
可選的callback參數是動畫完成後所執行的函數名稱。
注意：如需對位置進行操做，要記得首先把元素的CSS position屬性設置爲relative、fixed或absoult。css

用animate()方法作一個多屬性同時運動的例子

<!DOCTYPE html>
<html>
<head>
  <style>
    #div1{
      height:100px;
      width:100px;
      background:#f00;
      position:absolute;
    }
  </style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("div").animate({left:'250px',height:'150px',width:'150px'},300,function(){
        $("div").animate({opacity:'0.5'})
      });
    });
  });
</script>
</head>

<body>

<button>開始動畫</button>
<div id="div1">
</div>

</body>
</html>

經過上面的代碼咱們能夠看出jquery運動能夠作多屬性運動，也能夠作鏈式運動，也能夠作單屬性運動。調用方式跟咱們用原始javascript封裝的框架同樣。區別在於這裏能夠設定速度。json串中帶px等單位。jquery運動作鏈式運動的時候可使用回調函數，多寫幾個運動。animate的更多使用方法能夠參考http://www.w3school.com.cn/jq...。html

注意：是否能夠用animate()方法來操做全部css屬性？是的，幾乎能夠！不過，須要記住一件重要的事情：當使用animate()時，必須使用Camel標記法書寫全部的屬性名，好比，必須使用paddingLeft而不是padding-left，使用marginRight而不是margin-right等等。同時，色彩動畫並不包含在覈心jQuery庫中。若是須要生成顏色動畫，您須要從jQuery.com下載Color Animations插件。java

animate()使用預約義的值——"show"/"hide"/"toggle"

<!DOCTYPE html>
<html>
  <head>
    <title>jquery animate可使用預約義的值</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
      #div1{
        background: #f00;
        width: 100px;
        height: 100px;
        position: absolute;
      }
    </style>
    <script>
      $(function(){
        $("button").click(function(){
          $("div").animate({height:"toggle"});
        })
      })
    </script>
  </head>
  <body>
    <button>開始動畫</button>
    <div id="div1"></div>
  </body>
</html>

animate()使用隊列功能——相似於咱們本身封裝的鏈式運動

咱們封裝的運動沒有隊列功能。可是jquery提供針對動畫的隊列功能。這就意味着若是您在彼此以後編寫多個animate()調用，jquery會建立包含這些方法調用的內部隊列。而後逐一運動這些animate調用。jquery

<!DOCTYPE html>
<html>
  <head>
    <title>animate隊列調用</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
      #div1{
        width: 100px;
        height: 100px;
        background: #f00;
        position: absolute;
      }
    </style>
    <script>
      $(function(){
        $("button").click(function(){
          var div=$("div");
          div.animate({height:"300px",opacity:"0.4"},"slow");
          div.animate({width:"300px",opacity:"0.8"},"slow");
          div.animate({height:"100px",opacity:"0.4"},"slow");
          div.animate({width:"100px",opacity:"0.8"},"slow");
        })
      })
    </script>
  </head>
  <body>
    <button>開始動畫</button>
    <div id="div1"></div>
  </body>
</html>

stop()中止動畫或效果

stop()方法用於中止動畫或效果，在它們完成以前。
stop()方法適用於全部jquery效果函數，包括滑動、淡入淡出和自定義動畫。
語法：json

$(selector).stop(stopAll,goToEnd);

可選參數stopAll規定是否應該清除動畫隊列。默認是false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行。
可選參數goToEnd規定是否當即完成當前動畫。默認是false。

因此，默認的stop()會清除在被選元素上指定的當前動畫。框架

<!DOCTYPE html>
<html>
<head>
  <title>stop()清除當前運動</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
    $(function() {
      $("#flip").click(function() {
        $("#panel").slideDown(5000);
      });
      $("#stop").click(function() {
        $("#panel").stop();
      });
    });
  </script>
  <style type="text/css">
    #panel,#flip {
      padding: 5px;
      text-align: center;
      background-color: #e5eecc;
      border: solid 1px #c3c3c3;
    }
    #panel {
      padding: 50px;
      display: none;
    }
  </style>
</head>
<body>
  <button id="stop">中止滑動</button>
  <div id="flip">點擊這裏，向下滑動面板</div>
  <div id="panel">Hello world!</div>
</body>
</html>