/animated Selector trong thư viện jQuery
Các hàm built-in29/09/2023

animated Selector trong thư viện jQuery

Lựa chọn để tạo hiệu ứng hoạt hình hay animated Selector là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery được thiết kế để chọn tất cả các phần tử đang trong quá trình thực hiện một hiệu ứng hoặc animation tại thời điểm mà selector được thực thi.

Hiệu ứng animation trong các ứng dụng web là việc tạo ra các chuyển động hoặc hiệu ứng trực quan trên giao diện người dùng web. Điều này bao gồm di chuyển, thay đổi kích thước, thay đổi màu sắc, hiệu ứng fade-in/fade-out, xoay, và nhiều hiệu ứng khác nhằm làm cho trải nghiệm người dùng trở nên linh hoạt, thú vị và hấp dẫn hơn.

1. Cú pháp của animated Selector

Mục đích:

  • Chọn các phần tử đang thực hiện hiệu ứng hoặc animation để có thể thao tác hoặc xử lý chúng trong quá trình đó.

Cú pháp:

$(":animated")

Hoặc

jQuery( ":animated" )

Phiên bản hỗ trợ:

  • :animated Selector đã được hỗ trợ từ phiên bản jQuery 1.2.

Thông tin bổ sung:

  • :animated là một phần mở rộng của jQuery và không phải là một phần của quy định CSS. Do đó, các truy vấn sử dụng :animated không thể tận dụng hiệu suất cao cấp từ phương thức native DOM querySelectorAll().
  • Để đạt được hiệu suất tốt nhất khi sử dụng :animated để chọn các phần tử, nên trước tiên chọn các phần tử bằng một selector CSS thuần túy, sau đó sử dụng .filter(":animated").
animated Selector trong thư viện jQuery

2. Một số ví dụ minh họa

Dưới đây là một số ví dụ minh họa về việc sử dụng “:animated Selector” để chọn các phần tử đang thực hiện animation trong thư viện JQuery như sau:

2.1. Dừng animation khi click chuột

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stop Animated Element</title>
  <style>
    div {
      background: yellow;
      border: 1px solid #AAA;
      width: 80px;
      height: 80px;
      margin: 0 5px;
      float: left;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>

<button id="stopAnimation">Stop Animation</button>

<div id="mover"></div>

<script>
  function animateIt() {
    $("#mover").slideToggle("slow", animateIt);
  }

  animateIt();

  $("#stopAnimation").on("click", function () {
    $("#mover:animated").stop();
  });
</script>

</body>
</html>

Mô tả: Khi click vào nút “Stop Animation”, các phần tử đang được animate sẽ dừng lại.

2.2. Thực hiện hành động chỉ khi phần tử đang được animate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Selector Example</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 20px;
      display: inline-block;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
  <div id="rotateMe"></div>
  <button>Highlight Animated Elements</button>

  <script>
    $(document).ready(function() {
      $("button").click(function() {
        var animatedElements = $(":animated");
        animatedElements.css("background-color", "red");
      });

      animateDiv();
    });

    function animateDiv() {
      $("#rotateMe").animate({deg: 360}, {
        duration: 2000,
        step: function(now) {
          $(this).css({
            transform: 'rotate(' + now + 'deg)'
          });
        },
        complete: function() {
          animateDiv();
        }
      });
    }
  </script>
</body>
</html>

Mô tả: Trong ví dụ này, chúng tôi có một hộp màu xanh được quay vòng và một nút để lựa chọn các phần tử đang animate và đặt màu nền của chúng thành đỏ.

2.3. Tạo hiệu ứng khi phần tử đang được animate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Apply Effect on Animated Element</title>
  <style>
    div {
      background: yellow;
      border: 1px solid #AAA;
      width: 80px;
      height: 80px;
      margin: 0 5px;
      float: left;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>

<button id="applyEffect">Apply Effect</button>

<div id="mover"> 1 2 3 4 quay</div>

<script>
  function animateIt() {
    $("#mover").slideToggle("slow", animateIt);
  }

  animateIt();

  $("#applyEffect").on("click", function () {
    $("#mover:animated").css("transform", "rotate(180deg)");
  });
</script>

</body>
</html>

Mô tả: Khi click vào nút “Apply Effect”, các phần tử đang được animate sẽ được xoay một góc 180 độ.

Related posts