例如，我有4个图像改变时，使用jQuery .hover结合fadeIn，它工作正常，但如果你快速移动鼠标的图像事情变得更奇怪，悬停失败并且功能通常会变成一团糟。jQuery悬停与fadeIn失去焦点时，鼠标快速移动

例如：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（在一个单独的功能），但效果通常是相同的。

来源

2013-12-09 Wyck

就我个人而言，我会接近probelm有点不同。

第一了，我会改变您的标记每</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/

来源

2013-12-09 17:14:54 gvee

谢谢，这是我有什么最初和我已经回到它，CSS只是为了更容易的DOM加载和转换。 – Wyck

我将原来的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

来源

2013-12-09 23:21:51 arclite

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

回答

编辑

相关问题