help with hover function

Question

Any help would be appreciated...

I am trying to create the effect of a colour photo fading through from black and white. The fade in works but its fading the black and white one OUT first which i dont want...id like it to appear as though the colour is coming through. Then once its hovered off of it should revert back to my original graphic which it doesnt currently do at all.

The code below works perfectly apart from the section i mentioned above...

//Loop through the images and print them to the page
for (var i=0; i < totalBoxes; i++){
    $.ajax({
     url: "random.php?no=",
     cache: false,
     success: function(html) {
      // following line I originally suggested, but let's make it better...
      //$('#bg').append(html).fadeIn('slow');
      // also note the fine difference between append and appendTo.
      var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
      $('img', $d).hover(function() {
       var largePath = $(this).attr("rel");
       $(this).fadeOut("slow", function() {
        $(this).attr({ src: largePath }).fadeIn("slow");
       });
      });
     }
    });
}

Answer 1

You can provide two functions to the hover(over, out) event. Your currently only utilizing the "over" function. The "out" function is been ignored (as you have not provided one) which is why your not seeing a fadeout effect.

The effect your looking for is not working because the fadeOut effect waits for the animation to complete before it's callback function is called. You want both effects to perform simultaneously.

This effect is going to be a bit harder to accomplish.

First you'll have to have 2 image elements. One contains the color, one contains the b/w image.

$(this).fadeOut("slow");
$("otherImageElement").fadeIn("slow");

Now. I am not going to research everything, but. Doing this will momentarily display the "otherImageElement" to the right of "this" image element during the animation. Obviously not what you want. I believe "otherImageElement" will have to be placed "relative" to the original image so one appears above the other.

Answer 2

Thanks again Brad for your input...i like the way you approached it...i was hoping it was going to work :)

It produced a blank screen again sorry...here is my code...

       function switch(element) { 
   var originalPath = $(element).attr("src"); 
   var switchToPath = $(element).attr("rel"); 
   $(element).attr({ src: originalPath }); 
   $(element).fadeOut("slow", function() { 
     $(element).attr({ src: switchToPath }).fadeIn("slow"); 
   } 
  }

   //Loop through the images and print them to the page
  for (var i=0; i < totalBoxes; i++){
   $.ajax({
    url: "random.php?no=",
    cache: false,
    success: function(html) {
     // following line I originally suggested, but let's make it better...
     //$('#bg').append(html).fadeIn('slow');
     // also note the fine difference between append and appendTo.
     var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
     $('img', $d).hover( switch(this), switch(this) );
    }
   });
  }