jQuery hover with fadeIn потеряет фокус при быстрой перемещении мыши

Question

Например, у меня есть 4 изображения, которые меняются при использовании jQuery .hover, которые работают нормально, но если вы быстро перемещаете мышь по изображению, и функция обычно деградирует в беспорядок.

Пример: 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 на меньшую цифру!

---

EDIT

Еще проще 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