淡入.addClass

Question

我看到這個問題以前曾被問過，但是我正在使用的功能與示例的設置有所不同，因此我很難將它們全部組合在一起。

我有一個“懸停”類，我將使用.steps類將其添加到div中，以更改背景圖像。 但是我希望它淡入淡出（就像我在.divs-hover類的另一個div上所做的那樣。）

這是我所擁有的：

<script type='text/javascript'>
$(document).ready(function() {
  $('.steps').hover(over, out);
});

function over(event) {
  $('.steps').addClass("hover");
  $('.steps-hover', this).stop(true, true, true).fadeIn(500);
  $('.steps-hover', this).css("display", "normal");
}

function out(event) {
  $('.steps').removeClass("hover");
  $('.steps-hover', this).stop(true, true, true).fadeOut(500);
}
</script>

那么，如何讓.addClass和.removeClass淡入和淡出？ 我感覺這很簡單，但是我嘗試過的事情沒有奏效，我是jQuery初學者。 謝謝你的幫助！

Answer 1

它應該是

$(document).ready(function() {
  $('.steps').hover(over, out);
});

function over(event) {
  $(this).addClass("hover"); // the hover class has to be added to the specific `.steps` element which was hovered, not to all `.steps` elements
  $('.steps-hover', this).stop(true, true, true).fadeIn(500).css("display", "normal");
}

function out(event) {
  $(this).removeClass("hover"); //same as above
  $('.steps-hover', this).stop(true, true, true).fadeOut(500);
}