javascript - 鼠标悬停时的 div 模糊/有缺陷

Question

我有以下代码:

<div id="area">
  <p>
    Area here
  </p>
</div>

jQuery:

$('#area').on('mouseenter', function(event){
  $('#area').addClass('active');
});

$('#area').on('mouseleave', function(event){
  $('#area').removeClass('active');
});

SCSS:

#area{
  height:100px;
  width:500px;
  background:blue;

  &.active{
    height:50px;
  }
}

当我将鼠标悬停在#area 上时，它的高度正在更改(并且应该)小于原始高度。但是，当从页面底部到 div 执行悬停操作时，高度会变得模糊。

问题视频: https://streamable.com/phzka

fiddle : https://jsfiddle.net/gbL50pqj/3/

发生这种情况是因为在进行悬停操作时改变了高度，但是防止其中有问题的部分的最佳方法是什么？这是我尝试过的:

$('#area').on('mouseleave', function(event){
  $('#area').stop().removeClass('active');
  e.stopImmediatePropagation();
  e.preventDefault();
});

Answer 1

问题是这里的事件发生得太快。

如果对 CSS 过渡应用延迟，它会修复闪烁问题。
由您来调整...

.stop() 仅对 jQuery 动画有效...对添加/删除类没有影响。

$('#area').on('mouseenter', function(event){
  $('#area').addClass('active');
});

$('#area').on('mouseleave', function(event){
  $('#area').removeClass('active');
});

#area{
  height:100px;
  width:500px;
  background:blue;
  transition: 0.6s;  /* Transition delay */

  /* SCSS
  &.active{
    height:50px;
  }
  */
}

#area.active{  /* SCSS Equivalent for SO example */
  height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="area">
  <p>
    Area here
  </p>
</div>

编辑

您可以使用可见“区域”上方的另一个“透明”div 来完成此操作。所以鼠标进入和离开都会在高度不变的div上触发。

下面，我为其添加了红色边框，以便您可以看到它的位置。

$('#area_transparent').on('mouseenter', function(event){
  $('#area').addClass('active');
});

$('#area_transparent').on('mouseleave', function(event){
  $('#area').removeClass('active');
});

#area{
  height:100px;
  width:500px;
  background:blue;
  position: relative;
  z-index:1

  /* SCSS
  &.active{
    height:50px;
  }
  */
}

#area.active{  /* SCSS Equivalent for SO example */
  height:50px;
}

#area_transparent{
  height:100px;
  width:500px;
  position: absolute;
  z-index:100;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="area">
  <div id="area_transparent"></div>
  <p>
    Area here
  </p>
</div>