Endless fade looping with jQuery image rollover effect

Question

my intension was to replace images with nice fade effect: i have one image A as background. on mouse hover, image B fadeIn. on mouse out, image B fadeOut and we can see image A again. i'm using this code:

<script type='text/javascript'>
    $(function() {
            $("img.fade")
                .mouseover(function() { 
                $(this).fadeOut(2000);                          
                })
                .mouseout(function() {
                $(this).fadeIn(2000);                                   
                });
    });     
</script>

but the problem is that when the user stay on hover, it continue to loop (fadeIn, fadeOut,fadeIn,fadeOut..). i want that when the fade finish it holds. when the user mouse out, just then i want that the new fade will happen. Thanks!

p.s this is working code for using 2 images. this is different solution to the problem and i adsd this after my question is resolved.

<script type='text/javascript'>
$(function() {

  $('img.fade').hover(function() {
    var src = $(this).attr("src").match(/[^\.]+/) + "_over.jpg";
    $(this)
      .animate({opacity:0},0)
      .attr('src',src)
      .stop()
      .animate({opacity:1},1000);
  }, function() {
    var src = $(this).attr("src").replace("_over", "");
    $(this)
      .animate({opacity:0},0)
      .attr('src',src)
      .stop()
      .animate({opacity:1},500);
  });
});
</script>

Answer 1

Try this code:

 $(function() {
        $("img.fade")
            .mouseover(function() { 
            $(this).fadeTo('2000', 0);                          
            })
            .mouseout(function() {
            $(this).fadeTo(2000, 1);                                   
            });
});  ​

The problem is that the fadeOut() function sets the display property of your element to none, so the DOM thinks that your mouse is no longer interacting with the element, and calls the fadeIn() function. It loops continuously. The fadeTo function changes opacity, but it does not actually make the image go a way. It takes two paramaters, duration and opacity.

Answer 2

Seems to me the image disappears once it fades out, which would trigger the mouseout function. Try animating to .01 opacity.

Answer 3

$(function() {
  var img = ['imageA.jpg','imageB.jpg'] 
  $('img.fade').hover(function() {
    $(this)
      .animate({opacity:0},0)
      .attr('src',img[1])
      .stop()
      .animate({opacity:1},1000);
  }, function() {
    $(this)
      .animate({opacity:0},0)
      .attr('src',img[0])
      .stop()
      .animate({opacity:1},1000);
  });
});

You can try it here

Ref : .hover() , .stop()

Answer 4

If you don't want to dynamically switch the image and REALLY want to carry on using a background image you could take advantage of event bubbling...

HTML:

<div class="myClass" style="background: url(imageA.jpg);">
    <img src="imageB.jpg" />
</div>

jQuery:

$('.myClass').hover(function(){
    $(this).find('img').fadeOut(2000);
}, function(){
    $(this).find('img').fadeIn(2000);
})

Untested so let us know if it works or not.