jQuery : crossfading image on hover

Question

Hello guys,

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

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 2

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");
 }
});

Answer 3

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 4

Can you tell me about your solution? :) //Johan