Переход на другое изображение при наведении курсора с помощью JQuery

Question

Код, который я использую, работает, но если вы слишком быстро наведите курсор мыши на изображение, оно полностью исчезнет.Не показывает изображение или тот, который заменяет его при наведении.Просто пустое место.

У кого-нибудь есть идеи?

    $(document).ready(function(){
// Change the image of hoverable images
var openPng = $(".fadeim").attr("src");
var closedPng = openPng.replace(".png", "-hover.png");
$(".fadeim")
    .mouseover(function() {   
        $(this).fadeOut(350,function(){  
            $(this).attr("src", closedPng);  
            $(this).fadeIn(350);  
        });  
    })  
    .mouseout(function() {  
        $(this).fadeOut(350,function(){  
            $(this).attr("src", openPng);  
            $(this).fadeIn(350);           
        });  
    })  
});  

Answer 1

СКРИПТ

$(".imgHolder").mouseenter(function(){
      var $imgs = $(this).find("img");
      $imgs.first().fadeOut('slow');
      $imgs.last().fadeIn('slow');
    }).mouseleave(function(){
      var $imgs = $(this).find("img");
      $imgs.first().fadeIn('slow');
      $imgs.last().fadeOut('slow');
    }).find("img").last().hide();

CSS

.imgHolder img {
    position : absolute;
}

HTML

<div class="imgHolder">
    <img src="//placekitten.com/200/200"/>
    <img src="//placekitten.com/g/200/200/"/>
</div>

Answer 2

Вы можете попробовать fadeIn("fast").Вы дали время 350 миллисекунд, которые могут быть причиной проблемы.