アニメーションのキューイングやスタイルの競合を回避して、jQuery を使用してクラスの変更をスムーズにアニメーション化するにはどうすればよいですか?

jQuery を使用したクラス操作のアニメーション化

問題:

jQuery で addClass() と RemoveClass() を使用する方法のようにクラス変更をスムーズにアニメーション化できますか? animate()?

例 1: animate() の使用

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

このアプローチは、スムーズな遷移、アニメーション キューなし、正しいイージングなど、必要な基準をすべて満たしています。ただし、スタイルの変更はアニメーション内で定義し、スタイルシートから分離する必要があります。

例 2: addClass() と 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 });
});

このアプローチ部分的に基準を満たしており、スムーズな移行を示し、待ち行列を回避しています。ただし、クラス アニメーション中に jQuery の一時的なスタイルが追加されるため、早すぎるマウスの動きで色がジャンプします。

解決策:

クラス内のスタイルを統合しながら目的の動作を実現するには、jQuery で CSS トランジションを使用してクラスの変更を操作することを検討してください。

#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');
});

以上がアニメーションのキューイングやスタイルの競合を回避して、jQuery を使用してクラスの変更をスムーズにアニメーション化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。