jQuery : crossfading image on hover

Question

I'm trying to implement a 'fade into' script which would affect two images :

<script type="text/javascript">

  $(document).ready(function(){

        $('img').mouseover( function() {

              $(this).fadeOut(200, function() {

                    $(this).attr({'src':'http://example/images/image.png'});

               if (this.complete) $(this).fadeIn(500);

              });
        });

  });

</script>

This bit of jQuery gives me the following :

1 - first the image fades out and disappears 2 - then, from a blank space, it emerges the new one.

So I'd like to improve the script in order to get a real 'fade into' effect.

There's two great resources I have been exploring by now :

• Cycle Plugin - very cool (I will try to get that cycle effect on hover)
• JQuery for Designers cool , but I had a bunch of issues with IE (a strange black pixelated border on the fadeIn).

Thanks very much if someone can point out an eventual extra solution.

Jan

EDIT : CSS trick/solution here http://paragraphe.org/stackoverflowdemos/crossfade-images/

Answer 1

Lately I found a CSS focused solution : absolutely positioning an image "over" another, fading it to 0 with jQuery on Document ready, and fade to full on mouseover / fade again to 0 on mouseout.

Answer 2

The way you are calling the second fade, as a callback to the original fade will guarantee they are executed one after the other.

Might have more luck with this

$('img').mouseover( function() {
          $(this).fadeOut(200);
          $(this).attr({'src':'http://example/images/image.png'});
          if (this.complete) $(this).fadeIn(500);
        });

Although you will still be at the whim of the loading time of the second image unless it gets preloaded somewhere.

Answer 3

This is a kind of lengthy fix, but it's what I do to get smooth fades. I use the Fadeout, then as a callback, I use $.ajax to actually load a new image, then I use the success: function of that to add the to the div (or img) then use the complete: function to fade it in. That results in smooth fadeout-newcontent-fadein action.

Here is an example loading a php file, the principle is the same with an image:

$("#leftbar").fadeOut("normal", function() {
$.ajax({
    url: "bin/leftBar.php",
    cache: "false",
    success: function(data) {
        $("#leftbar").html(data);
    },
    complete: function() {
        $("#leftbar").fadeIn("normal");
    }
});