Question

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

<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样式和更改图像源）正在起作用。

Answer 1

如果可行，您可以使用CSS而不是jQuery。当您淡出元素时，将触发悬停退出事件，因此它将仅以您拥有的方式在状态之间切换。这是fiddle，其中包含在鼠标悬停时显示/隐藏的示例。基本上你喜欢

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

#elem:hover {
    opacity: 0;
}

要隐藏的任何元素。

Answer 2

您不能将fadeOut（）效果与添加hover（）的元素相同。 fadeOut（）将Element设置为“ display：none;”。并将其从DOM中删除。因此，永远不会发生$ fadeIn（）效果，因为定位了$ hover（）的元素已消失。

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

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

jQuery FadeIn / FadeOut方法不起作用

2 个答案: