修改

Question

例如，当使用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（在单独的函数上）但效果通常是相同的。

Answer 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);

});

DEMO：http://jsfiddle.net/BD5EZ/2/

显然，如果你想加快过渡，只需将1000更改为较小的数字！

修改

更简单的JQuery，我忘记了.fadeToggle()功能！

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

DEMO：http://jsfiddle.net/BD5EZ/4/

Answer 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

当快速移动鼠标时，jQuery悬停与fadeIn失去焦点

2 个答案:

修改