淡入 .addClass

Question

我看到以前有人问过这个问题，但我使用的功能与示例不同，所以我无法将它们放在一起。

我有一个“悬停”类，我正在将其添加到带有 .steps 类的 div 中，该类会更改背景图像。但是我希望它淡入淡出（就像我在另一个 div 上使用 .steps-hover 类所做的那样。）

这是我所拥有的：

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