jquery為.addClass添加淡入淡出

Question

我如何淡入淡出.addClass。

鏈接在這里 -

http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.html

這是代碼 -

$(document).ready(function() {
  $('#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13').hover(function() {
    $(this).addClass('pretty-hover');
  }, function() {
    $(this).removeClass('pretty-hover');
  });
});

$(document).ready(function() {
  $('#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12').hover(function() {
    $(this).addClass('pretty-hover_01');
  }, function() {
    $(this).removeClass('pretty-hover_01');
  });
});

謝謝

Answer 1

如果jQuery UI是一個選項，您可以使用.toggleClass(class, duration) 。

此外，您可以簡化您的選擇器，它看起來像:even和:odd將根據您當前的選擇器執行該作業，如下所示：

$(function() {
  $('#menu li:even').hover(function() {
    $(this).toggleClass('pretty-hover', 500);
  });
  $('#menu li:odd').hover(function() {
    $(this).toggleClass('pretty-hover_01', 500);
  });
});

我意識到上面似乎倒退了，但是:even選擇了第一個元素，因為它基於0，所以甚至選擇0，2，4等。我希望你會同意，讓它更容易維護:)

根據評論進行編輯 - 由於.toggleclass()堅持快速懸停，這里有一個可以按預期工作的替代方案，只需更長一點：

$('#menu li.post:even').hover(function() {
  $(this).stop().animate({ backgroundColor: '#009FDD', color: '#FFF' }, 500);
}, function() {
  $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);  
});
$('#menu li.post:odd').hover(function() {
  $(this).stop().animate({ backgroundColor: '#623A10', color: '#FFF' }, 500);
}, function() {
  $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);  
});

Answer 2

如果你想淡化元素的顏色，你需要使用jQuery UI ，它對衰落和動畫有更高級的支持（核心jQuery只能淡化/動畫整數屬性：顏色不起作用）。

它甚至支持動畫整個CSS類中的所有屬性，因此使用jQuery UI，您應該能夠實現所需的效果。

Answer 3

jQuery .animate函數是最好的選擇，雖然這不會讓你在CSS類之間設置動畫 - 你必須指定各個樣式。

您可以更好地使用jQquery UI，因為這將提供此類功能，如jQuery animate頁面中所述：

jQuery UI項目通過允許對顏色等非數字樣式進行動畫處理來擴展.animate（）方法。 該項目還包括通過CSS類而不是單個屬性指定動畫的機制