I have multiple images. When i mouseover on each image it's change to another image and on mouseout get back to its previous image. The problem is that when we doing this process rapidly on every images each image intact to its hover image but not get back to its previous image. But when i slowly doing this the effect and functionality working correctly. I am giving the following code snippet only for two images. Please help me out from this. Sorry for my bad written english.

HTML PART
=========

```
<div style="float:left;">
   <a class="dialog-link" href="#" >
        <img src="images/twitter.png" width="126" height="78" border="0" class="twitter_h"/>     
   </a>
</div>

<div style="float:left; margin-left:83px;">
<a class="dialog-link" href="#" target="_blank">
<img src="images/linkedin.png" width="232" height="78" border="0" class="linkedin_h"/></a>
</div>

```

JQUERY PART
===========

```
<script>
$(function(){

    var link_open=false;
    var openGif_t = $(".twitter_h").attr("src");    
    var closedGif_t = openGif_t.replace("twitter.png", "follow1.png");

    var openGif_l = $(".linkedin_h").attr("src");   
    var closedGif_l = openGif_l.replace("linkedin.png", "connect1.png");

$(".twitter_h")
   .mouseenter(function() {
    $(this).fadeOut(function(){
           $(this).attr("src", closedGif_t);
           $(this).fadeIn(150);
       });
   })
   .mouseleave(function() {
    $(this).fadeOut(function(){
           $(this).attr("src", openGif_t);
           $(this).fadeIn(150);
       });
   });

$(".linkedin_h")
   .mouseenter(function() {
       //alert(closedGif)
       $(this).fadeOut(function(){
           $(this).attr("src", closedGif_l);
           $(this).fadeIn(150);
       });
   })
   .mouseleave(function() {
      // alert($(this).attr("src"));
       $(this).fadeOut(function(){
           $(this).attr("src", openGif_l);
           $(this).fadeIn(150);
       });
   });

});

```