Fade to another image on hover using JQuery

The code I'm using works, but if you run your mouse too quickly over the image, it disappears completely. Doesn't show the image or the one which replaces it on hover. Just a blank space.

Anyone have any ideas?

    $(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);           
        });  
    })  
});  

---

You can try fadeIn("fast"). You have given time 350 milliseconds which may be causing the issue.

---

SCRIPT

$(".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>