jquery - jQuery fadeToggle()淡出,但不淡入

两个div逐渐消失,但不会消失。

这是一些代码:

<script type="text/javascript">
  $(document).ready(function() {
    $(".slideBar").mouseover(function(){
      $(this).fadeToggle();
    });
  });
</script>


至于CSS:

.slideHeader{
  vertical-align: right;
  position: absolute;
  bottom: 10%;
  left: 6%;
}

.slideBar{
  height: 100%;
  width: calc(100% / 20);
  background-color: rgb(64, 64, 64, .5);
  position: absolute;
}

#sbLeft{
  left: 0;
}

#sbRight{
  right: 0;
}

最佳答案

您应该使用mouseleavemouseout事件。
当您将鼠标指针移到.slidebar元素时,将执行mouseover事件,并且当您离开鼠标指针时,什么也不会发生。

$(document).ready(function() {
    $(".slideBar").mouseover(function(){
      $(this).fadeToggle();
    });

    $(".slideBar").mouseleave(function(){
      $(this).fadeToggle();
    });
  });