Bagaimanakah Saya Boleh Menghidupkan Perubahan Kelas dengan Lancar dengan jQuery, Mengelakkan Beratur Animasi dan Konflik Gaya?

Menghidupkan Manipulasi Kelas dengan jQuery

Masalah:

Dalam jQuery, menggunakan addClass() dan removeClass(), bagaimana adakah anda dengan lancar menghidupkan perubahan kelas seperti yang anda boleh animate()?

Contoh 1: Menggunakan animate()

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

Pendekatan ini memenuhi semua kriteria yang dikehendaki: peralihan lancar, tiada animasi beratur dan pelonggaran yang betul. Walau bagaimanapun, perubahan gaya mesti ditakrifkan dalam animasi, memisahkannya daripada lembaran gaya.

Contoh 2: Menggunakan addClass() dan removeClass()

$('#someDiv').addClass('blue').mouseover(function() {
  // Remove inline styles before applying 'red' class with animation
  $(this).stop(true, false).removeAttr('style').addClass('red', { duration: 500 });
}).mouseout(function() {
  // Same for removing 'red' class
  $(this).stop(true, false).removeAttr('style').removeClass('red', { duration: 500 });
});

Pendekatan ini sebahagiannya memenuhi kriteria, mempamerkan peralihan yang lancar dan mengelakkan beratur. Walau bagaimanapun, disebabkan penambahan gaya sementara jQuery semasa animasi kelas, warna melonjak pada pergerakan tetikus pramatang.

Penyelesaian:

Untuk mencapai tingkah laku yang diingini sambil menyatukan gaya dalam kelas , pertimbangkan untuk menggunakan peralihan CSS dengan jQuery untuk memanipulasi perubahan kelas.

#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').addClass('blue').mouseover(function() {
  $(this).addClass('red');
}).mouseout(function() {
  $(this).removeClass('red');
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghidupkan Perubahan Kelas dengan Lancar dengan jQuery, Mengelakkan Beratur Animasi dan Konflik Gaya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!