jQuery動畫的顯示與隱藏效果

千鋒教育qyf發表於2021-07-19

  jQuery中用於控制元素顯示和隱藏效果的方法如表1所示。

  表1 控制元素的顯示和隱藏

1

  在表1中,引數speed表示動畫的速度,可設定為動畫時長的毫秒值(如1000),或預定的3種速度(slow、fast和normal);引數easing表示切換效果,預設效果為swing,還可以使用linear效果;引數fn表示在動畫完成時執行的函式。

  下面透過程式碼演示show()、hide()和toggle()的簡單使用。

  <style>
  div { width: 150px; height: 300px; background-color: pink; }
  </style>
  <button>顯示</button>
  <button>隱藏</button>
  <button>切換</button>
  <div></div>
  <script>
  $("button").eq(0).click(function() {
  $("div").show(1000, function() {
  alert("已顯示");
  });
  });
  $("button").eq(1).click(function() {
  $("div").hide(1000, function() {
  alert("已隱藏");
  });
  });
  $("button").eq(2).click(function() {
  $("div").toggle(1000);
  });
  </script>

  上述程式碼中,第2行設定div元素的樣式寬度150px,高度300px,背景色pink。第4~6行分別定義功能按鈕,第7行定義div元素,第9~13行給頁面中的第1個按鈕繫結單擊事件,實現單擊“顯示”按鈕控制div元素的顯示,第14~18行給頁面中的第2個按鈕繫結單擊事件,實現單擊“隱藏”按鈕控制div元素的隱藏,第19~21行給頁面中的第3個按鈕繫結單擊事件,實現單擊“切換”按鈕控制div元素的顯示和隱藏。

  在瀏覽器中執行,效果如圖1所示。

2


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69996644/viewspace-2782121/,如需轉載,請註明出處,否則將追究法律責任。

相關文章