jQuery FadeIn / FadeOut 方法不起作用答案

【问题标题】：jQuery FadeIn / FadeOut Methods not workingjQuery FadeIn / FadeOut 方法不起作用
【发布时间】：2018-08-10 14:58:28
【问题描述】：

我想在悬停时淡化图像。为什么这不起作用？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#lightbulb").hover(function(){
      $("#lightbulb").fadeOut('fast');
    },function(){
      $("#lightbulb").fadeIn();
    });
  });
</script>

其他 jQuery 方法（如 CSS 样式和更改图像源）正在运行。

【问题讨论】：

#lightbulb 元素在哪里？此外，如果元素没有淡出，则根本无法将其悬停，因为它在 DOM 中不占用空间
Rory McCrossan --> 感谢您的帮助！你建议我怎么做？
如果没有看到我在之前评论中要求的信息，我不知道...？

标签： javascript jquery html css animation

【解决方案1】：

您不能将fadeOut() 效果放置在您添加hover() 的同一元素上。 fadeOut() 将元素设置为“display: none;”并将其从 DOM 中移除。所以 $fadeIn() 效果永远不会发生，因为带有 $hover() 目标的元素已经消失了。

您需要使用 hover() 和 fadeIn() 和 fadeOut() 内部元素来定位父容器。应该可以的。

$("#parentbulb").hover(function(){
    $("#lightbulb").fadeOut('fast');
  },function(){
    $("#lightbulb").fadeIn();
});

【讨论】：

【解决方案2】：

如果可行，您可以使用 css 代替 jQuery。当您淡出元素时，将触发悬停退出事件，因此它只会按照您的方式在状态之间切换。这是一个fiddle，带有一个在悬停时隐藏/显示的示例。基本上你喜欢

#elem {
     opacity: 1;
     transition: opacity: 0.2s;
}

#elem:hover {
    opacity: 0;
}

在您想要隐藏的任何元素上。

【讨论】：

效果很好，但我也想逐渐改变图像的来源。