Bagaimanakah Peralihan jQuery dan CSS Boleh Menghidupkan Perubahan Warna Elemen DOM dengan Lancar?

Peralihan Kelas CSS Animasi jQuery untuk Perubahan Warna Elemen DOM Lancar

Pengenalan
Dalam artikel ini, kami menangani cabaran menganimasikan CSS perubahan atribut pada pelbagai objek menggunakan jQuery sambil mengekalkan kawalan ke atas lembaran gaya takrifan.

Contoh 1: Animasikan dengan Sifat CSS Terdedikasi
Menggunakan animate(), kita boleh memanipulasi secara langsung sifat CSS dalam kod animasi:

$('#someDiv').mouseover(function() {
  $(this).stop().animate({ backgroundColor: 'blue' }, { duration: 500 });
}).mouseout(function() {
  $(this).stop().animate({ backgroundColor: 'red' }, { duration: 500 });
});

Walau bagaimanapun, pendekatan ini memisahkan definisi gaya daripada helaian gaya, iaitu kurang diingini.

Contoh 2: AddClass/RemoveClass Alternative
Untuk memanfaatkan kelas stylesheet, kami boleh menggunakan addClass() dan removeClass(), seperti yang ditunjukkan di bawah:

$('#someDiv').addClass('blue').mouseover(function() {
  $(this).stop(true, false).removeAttr('style').addClass('red', { duration: 500 });
}).mouseout(function() {
  $(this).stop(true, false).removeAttr('style').removeClass('red', { duration: 500 });
});

Walaupun sesetengah animasi berfungsi seperti yang diharapkan, yang lain terganggu kerana gaya sementara digunakan semasa animasi.

Penyelesaian Ideal
Kami bercita-cita untuk mengekalkan definisi kelas CSS di satu tempat (lembaran gaya) sambil menggunakan jQuery untuk peralihan kelas animasi.

Cadangan Penyelesaian
Untuk mencapai matlamat ini, kami mengesyorkan agar anda memanfaatkan peralihan CSS dalam kombinasi dengan jQuery's keupayaan manipulasi kelas. Lihat contoh langsung ini untuk demonstrasi:

<div>
<pre class="brush:php;toolbar:false">#someDiv {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

$('#someDiv').mouseover(function() {
  $(this).addClass('blue');
}).mouseout(function() {
  $(this).removeClass('blue');
});