jQuery :animated Selector - Chọn những phần tử đang chuyển động animate

views

A+A-

PrintEmail

Sử dụng bộ chọn jQuery :animated Selector để chọn ra những phần tử đang có hiệu ứng hoạt hình animate ? Cùng xem cú pháp và cách thực hiện selector này như thế nào nhé

Cú pháp, Khái niệm và cách sử dụng jQuery :animated Selector

Syntax

Bộ chọn jQuery :animated Selector có cú pháp

$(":animated")

Nếu chọn kết hợp với bộ chọn khác. Các bạn sẽ sử dụng cú pháp

$("selector :animated")

Trong đó selector là bộ chọn khác, và phải có khoảng trắng trước :animated, các bạn không nên viết dính liền thành selector:animated, như vậy jQuery sẽ không hiểu nhé.

Bộ chọn jQuery :animated Selector dùng để chọn tất cả các phần tử đang có hiệu ứng chuyển động (trạng thái hoạt hình animate)

Ví dụ jQuery :animated Selector

Ví dụ

Chọn tất cả những phần tử đang có hiệu ứng animated

$(":animated")

Thử code »

Hoặc có thể bạn xem ví dụ ở đây.
Ví dụ: Bạn có HTML như sau:

<div id="example">
<div style="background:blue;">Div 1</div>
<div style="background:green;">Div 2</div>
<div style="background:yellow;">Div 3</div>
</div>

Bấm button sau để chọn những phần tử đang có sự chuyển động animate trong thẻ div có id="example" để set background thành màu đỏ

Div 1

Div 2

Div 3

Và đây là code jQuery bạn phải viết:

<script>
$(document).ready(function(){
   function aniDiv(){
    $("#example div:eq(0)").animate({width: "50%"}, "slow");
    $("#example div:eq(0)").animate({width: "100%"}, "slow", aniDiv);
  }
  aniDiv();
  $("#btn1").click(function(){
    $("#example :animated").css("background-color", "red");
  });
});
</script>

Xem thêm bài viết Tất cả bộ chọn jQuery Selectors tại đây

Chuyên Mục : Bộ chọn jQuery Học jQuery jQuery Selectors