jQuery 影片-有解無憂

我們可以通過 jQuery 中的 animate() 方法來創建自定義影片，

animate()方法

animate() 方法用于創建自定義影片，

語法如下：

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

params ：必需引數，定義要設定影片的 CSS 屬性，
speed：可選引數，指定效果的持續時間，可選值有 slow、fast、毫秒，
easing：可選引數，規定在不同的影片點中設定影片速度的 easing 函式，內置的 easing 函式有 swing、linear，
callback：可選引數，是影片完成后要執行的函式，

默認情況下，所有 HTML 元素都有一個靜態位置，且無法移動，如果要對位置進行操作，需要先將元素的 position 屬性設定為 relative、fixed 、absolute，

示例：

我們來看一下例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<style>
  .box{
    width: 700px;
    height: 200px;
    border: 1px solid #000;
  }
  .rect{
    width: 100px;
    height: 100px;
    background: pink;
    margin-top: 50px;
    position:absolute;
  }
</style>
<script>
  $(function(){
    $("button").click(function(){
      $(".rect").animate({left:'300px'});
    });
  });
</script>
</head>
<body>
  <div class="box">
    <div class="rect"></div>
  </div>
  <p><button>開始影片</button></p>
</body>
</html>

在這個例子中，有一個大的矩形框，我們要實作的效果為點擊按鈕，讓粉色正方形向右移動，需要注意的是，我們必須給要移動的元素設定 position 屬性，否則 animate() 方法不起作用，而花括號 {} 中的就是 CSS 屬性，animate() 方法中幾乎可以操作所有 CSS 屬性，但是在使用時必須注意，要使用 Camel 標記法書寫所有的屬性名，例如 padding-left 使用 paddingLeft ，padding-right 使用 paddingRight 等，
我們來看一下上述代碼在瀏覽器中的演示效果：

操作多個屬性

我們可以為一個影片設定多個屬性，各個屬性之間通過逗號隔開，例如設定影片移動后的距離，透明度，寬度和高度，

示例：

$(function(){
    $("button").click(function(){
      $(".rect").animate({
        left: '400px',
        opacity: '0.8',
        height: '20px',
        width: '20px'
      }, 2000);
    });
});

在瀏覽器中的演示效果：

使用相對值

我們在給影片設定 CSS 屬性的時候可以使用相對值，相對值就是相當于元素當前值，在值的前面加上 += 或 -= 符號，

示例：

$(function(){
    $("button").click(function(){
      $(".rect").animate({
        left: '400px',
        opacity: '0.8',
        height: '-=50px',
        width: '+=100px'
      }, 2000);
    });
});

在瀏覽器中的演示效果：

使用預先定義的值

我們可以將屬性的影片值指定為 show，hide 或 toggle ，

示例：

show 表示顯示，hide 表示隱藏，toggle 表示切換顯示與隱藏：

$(function(){
    $("button").click(function(){
      $(".rect").animate({
        left:'300px',
        height: 'toggle',
        width: 'toggle',
      }, 2000);
    });
});

在瀏覽器中的演示效果：

使用佇列功能

默認情況下，jQuery 提供針對影片的佇列功能，這也就意味著如果在彼此之后撰寫多個 animate() 方法呼叫，jQuery 將使用這些方法呼叫創建一個“內部”佇列，然后它逐一運行 animate 呼叫，

示例：

$(function(){
    $("button").click(function(){
      var rect = $(".rect");
      rect.animate({left:'300px', width:'300px', opacity:'0.8'}, 2000);
      rect.animate({height:'10px', opacity:'0.5'}, "slow");
      rect.animate({width:'100px', height:'100px', opacity:'1'}, 2000);
    });
});

在瀏覽器中的演示效果：

stop()方法

stop() 方法用于在影片或效果完成前對它們進行停止，它適用于所有的 jQuery 效果函式，包括滑動，淡入淡出和自定義影片，

語法如下：

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

stopAll：可選引數，指定是否應該清除影片佇列，默認值為 false ，即只會停止活動的影片，后續佇列影片仍繼續執行，
gotoend：可選引數，指定是否立即完成當前影片，默認值為 false，

示例：

點擊按鈕開始影片，點擊粉色正方形停止影片：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<style>
  .box{
    width: 700px;
    height: 200px;
    border: 1px solid #000;
  }
  .rect{
    width: 100px;
    height: 100px;
    background: pink;
    margin-top: 50px;
    position:absolute;
  }
</style>
<script>
  $(function(){
    $("button").click(function(){
      $(".rect").animate({
        left:'300px',
        width: '300px',
      }, 3000);
    });
    $(".rect").click(function(){
      $(this).stop();
    });
  });
</script>
</head>
<body>
  <div class="box">
    <div class="rect"></div>
  </div>
  <p><button>點擊按鈕開始影片</button></p>
</body>
</html>

在瀏覽器中的演示效果：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291499.html

標籤：其他

上一篇：基于SSM實作保健院管理系統

下一篇：前端進階學習之路學習