Pemilih animated

Pemilih :animated memilih elemen yang pada masa ini terlibat dalam animasi. Jika anda menggunakan binaan jQuery tersuai tanpa modul kesan, maka penggunaan :animated akan menyebabkan ralat. Oleh kerana :animated tidak tergolong dalam spesifikasi CSS, untuk meningkatkan prestasi dalam pelayar moden adalah lebih baik untuk menapis elemen terlebih dahulu dengan menggunakan pemilih css tulen, dan kemudian mengaplikasikan .filter(':animated').

Sintaks

Beginilah cara kami memilih elemen yang terlibat dalam animasi:

javascript$(':animated');

Contoh

Mari kita buat supaya pada satu daripada segi empat animasi dilancarkan menggunakan fungsi animateIt. Pada setiap klik pada butang dengan #change warna segi empat yang dianimasikan akan berubah daripada hijau kepada merah dan sebaliknya - melalui pembuangan dan penambahan kelas colored dengan kaedah 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