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:

javascript$(':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:

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();

Lihat juga