鼠标hoverfunction在队列中多次出现

我有这个代码在鼠标hover时淡化另一个代码，并在光标离开查看区域时淡出。

示例： http ： //jsfiddle.net/3vgbemgu/

$('.under').hover(function () { $('.over').fadeIn(); }, function () { $('.over').fadeOut(); }); 

但是，如果用户快速多次将鼠标移动到该区域上，则动画会创建一个队列，这意味着div会一个接一个地淡入淡出。 更明显的是，屏幕上有多个动画实例，或者淡入和淡出时间较长。

如何在第一次出现动画时重新触发动画？

Answer 1

您可以使用jquery .stop（） ：

 $('.under').hover(function() { $('.over').stop(true, true).fadeIn(); }, function() { $('.over').stop(true, true).fadeOut(); }); 

 .frame { position: absolute; width: 400px; height: 300px; } .under { width: 100%; height: 100%; z-index: 1; } .under img { width: 100%; height: 100%; } .over { position: absolute; width: 100%; height: 100%; font-size: 36px; text-align: center; color: yellow; background: rgba(64, 64, 64, 0.5); top: 0; left: 0; z-index: 2; display: none; } span { margin-left: auto; margin-right: auto; background-color: white; } 

  
 
  
  Link 1    Link 2 
 
  

Answer 2

您可以使用.mouseenter（）和.mouseleave（）代替。 它们只被触发一次。

 $('.under').mouseenter(function() { $('.over').fadeIn(); }).mouseleave(function() { $('.over').fadeOut(); });