【问题标题】：jQuery hover with fadeIn lose focus when mouse is moved quickly快速移动鼠标时，带有淡入淡出的jQuery悬停失去焦点
【发布时间】：2013-12-09 16:56:35
【问题描述】：

例如，当我使用 jQuery .hover 和 fadeIn 时，我有 4 个图像会发生变化，效果很好，但是如果你将鼠标快速移动到图像上，事情就会变得很奇怪，悬停会失败，并且该功能通常会降级为乱七八糟的。

示例：http://jsfiddle.net/BD5EZ/ 将鼠标快速移动到图像上，它们就会变得一团糟。

我该如何改进这一点，使没有悬停效果的图像真正回到原来的状态，并且效果的一般快速？

      var sourceIn = function () {
         var $this = $(this);
         var newSource = $this.data('alt-src');
         $this.data('alt-src', $this.attr('src'));
         $this.fadeOut(function () {
             $this.attr('src', newSource).stop(true, true).fadeIn();
         });
      }
      $(function () {
         $('img.toggle').hover(sourceIn);
      });

我也尝试过使用mouseleave 和mouseenter（在单独的函数上），但效果大致相同。

【问题讨论】：

标签： jquery performance hover

【解决方案1】：

就我个人而言，我会以不同的方式处理问题。

首先，我会将您的标记更改为每个 </li> 有两个图像：

<div id="slider">
    <ul>
        <li>
            <img class="toggle" src="http://i.imgur.com/sQ3ANRNb.jpg">
            <img class="toggle" src="http://i.imgur.com/H9cvzaOb.jpg">
        </li>
        <li>
            <img class="toggle" src="http://i.imgur.com/sQ3ANRNb.jpg">
            <img class="toggle" src="http://i.imgur.com/H9cvzaOb.jpg">
        </li>
        <li>
            <img class="toggle" src="http://i.imgur.com/sQ3ANRNb.jpg">
            <img class="toggle" src="http://i.imgur.com/H9cvzaOb.jpg">
        </li>
    </ul>
</div>

然后我会添加一些 CSS 来设置图片的样式，以便第二张图片显示在第一张图片的后面。

#slider ul li {
    position: relative;
}
#slider ul li img:last-child {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

最后，我将使用以下更新的 JQuery，当您在“顶部”图像上时，它只会改变不透明度：

$('#slider ul li img:first-child').hover(function () {
    $(this).stop().animate({
        'opacity': 0
    }, 1000);
}, function () {
    $(this).stop().animate({
        'opacity': 1
    }, 1000);

});

演示：http://jsfiddle.net/BD5EZ/2/

显然，如果您想加快转换速度，只需将1000 更改为更小的数字！

编辑

更简单的 JQuery，我忘了 .fadeToggle() 函数！

$('#slider ul li img:first-child').hover(function () {
    $(this).fadeToggle();
});

演示：http://jsfiddle.net/BD5EZ/4/

【讨论】：

谢谢，这是我最初的想法，我又回到了它，CSS 只是让 DOM 加载和转换更容易。

【解决方案2】：

我会将原始 src attr 存储在变量中，代码将如下所示

$(function () {
  var srced;
  $('img.toggle').hover(function(){
         srced = $(this).attr('src');  
         $(this).attr('style','opacity:0');
         $(this).addClass('hovered').animate({'opacity':'1'},500).attr('src',$(this).data('alt-src'));
       }, function(){     
         $(this).attr('style','opacity:0');
         $(this).animate({'opacity':'1'},500).attr('src',srced).removeClass('hovered');
       });
});

DEMO

【讨论】：