14/08/2018, 09:38
:animated Selector trong jquery
animated selector sẽ chọn tất cả các phần tử đang trong quá trình chuyển động(animation) khi mà selector này khởi chạy. Cú pháp Cú pháp jQuery( ":animated" ) Lưu ý : nếu bạn sử dụng phiên bản Jquery custom và không bao gồm module effects, ...
animated selector sẽ chọn tất cả các phần tử đang trong quá trình chuyển động(animation) khi mà selector này khởi chạy.
Cú pháp
Cú pháp
jQuery( ":animated" )
Lưu ý: nếu bạn sử dụng phiên bản Jquery custom và không bao gồm module effects, animated selector sẽ báo lỗi.
Chú ý: Bởi vì animated là một Jquery extension và không phải là một phần thiết lập của CSS, các truy vấn sử dụng animated sẽ không thể phát huy hiệu quả của phương thức querySelectorAll(). Để đạt được hiệu quả cao nhất khi sử dụng animated để chọn các phần tử, đầu tiên hãy chọn các phần tử bằng cách sử dụng các selector CSS thuần túy, sau đó sử dụng bộ lọc .filter(":animated").
Ví dụ
Thay đổi màu của các thẻ div có sử dụng animated:
Code
RUN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>all demo</title>
<style>
div {
background: yellow;
border: 1px solid #AAA;
awidth: 80px;
height: 80px;
margin: 0 5px;
float: left;
}
div.colored {
background: green;
}
</style>
<script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>Học lập trình miễn phí tại code24h.com</h1>
<div></div>
<div id="mover"></div>
<div></div>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
$( "div:animated" ).toggleClass( "colored" );
}
function animateIt() {
$( "#mover" ).slideToggle( "slow", animateIt );
}
animateIt();
</script>
</body>
</html>Kết quả:
Tham khảo: jquery.com
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com
