Selektor animated

Selektor :animated memilih elemen yang saat ini terlibat dalam animasi. Jika Anda menggunakan build jQuery kustom tanpa modul efek, maka penggunaan :animated akan menyebabkan error. Karena :animated tidak termasuk dalam spesifikasi CSS, maka untuk meningkatkan performa di browser modern lebih baik awalnya menyaring elemen dengan menggunakan selektor css murni, kemudian menerapkan .filter(':animated').

Sintaks

Beginilah cara kita memilih elemen yang terlibat dalam animasi:

$(':animated');

Contoh

Mari kita buat salah satu kotak menjalankan animasi menggunakan fungsi animateIt. Setiap kali tombol dengan #change diklik, warna kotak yang dianimasi akan berubah dari hijau ke merah dan sebaliknya - dengan cara menghapus dan menambahkan kelas colored menggunakan metode toggleClass:

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

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

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

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

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

animateIt();

Lihat juga

metode slideToggle,
yang menampilkan elemen tersembunyi dan menyembunyikan elemen yang ditampilkan
metode toggleClass,
yang menambahkan atau menghapus kelas CSS
metode find,
yang mencari elemen di dalam elemen yang sudah ditemukan