Bộ chọn animated

Bộ chọn :animated chọn các phần tử hiện đang tham gia vào một hoạt ảnh. Nếu bạn sử dụng bản tùy chỉnh jQuery không có mô-đun hiệu ứng, việc sử dụng :animated sẽ gây ra lỗi. Vì :animated không thuộc về đặc tả CSS, để cải thiện hiệu suất trong các trình duyệt hiện đại, tốt nhất trước tiên nên lọc các phần tử bằng cách sử dụng bộ chọn css thuần túy, sau đó áp dụng .filter(':animated').

Cú pháp

Chúng ta chọn các phần tử đang tham gia vào hoạt ảnh như sau:

javascript$(':animated');

Ví dụ

Hãy để một trong các hình vuông chạy hoạt ảnh bằng hàm animateIt. Mỗi lần nhấp vào nút có #change, màu của hình vuông đang hoạt ảnh sẽ thay đổi từ xanh lục sang đỏ và ngược lại - bằng cách xóa và thêm lớp colored bằng phương thức toggleClass:

html<button id="change">change</button>

<div></div>
<div id="test"></div>

cssdiv {
  background: green;
  border: 1px solid #AAA;
  width: 80px;
  height: 80px;
  margin: 0 5px;
  float: left;
}
div.colored {
  background: red;
}

javascript$('#change').click(function() {
  $('div:animated').toggleClass('colored');
});

function animateIt() {
  $('#test').slideToggle('slow', animateIt);
}

animateIt();

Xem thêm