Question

两个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;
}

Answer 1

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

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

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

Answer 2

从documentation，< 1 core：

通过设置匹配元素的不透明度来显示或隐藏它们。

因此，一旦元素淡出，就将fadeToggle()设置为display。因此，您无法从该元素获得一个事件来将其切换回。

您唯一的选择是在另一个显示的元素上使用事件...

none

$(document).ready(function() {
  
  var bar = $(".slideBar");
  var btn = $("#displayBtn");
  
  bar.mouseover(function(){
    $(this).fadeToggle();
    
    // Show a button.
    btn.fadeToggle();
  });
  
  btn.click(function(){
    $(this).fadeToggle();
    
    // Show the bar.
    bar.fadeToggle();
  });
});

.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;
}

#displayBtn{
  display:none;
}

jQuery fadeToggle（）淡出，但不淡入

2 个答案: