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.