淡入.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);
}