如何使用 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 在類別動畫期間臨時添加樣式，因此在滑鼠過早移動時顏色會跳躍。

解決方案：

在類別中合併樣式的同時實現所需的行為，考慮使用 CSS 過渡和 jQuery 來操作類別變更。

#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中文網其他相關文章！