Using fade in/fade out with jquery

Question

I am working over on of my student projects and I am new jquery, for the project I have to use jquery to enhance few function and I have learned much to carry out basic tasks, but I am stuck over something very confusing.

One my scripts actually changes the image of a div container at mouse over function, function is currently fine but make it feel a little beautiful I want to add transition affects to it either through fade in fade out functions or through animate but am unable to work it out with both. I searched over internet but here i am unable to relate those examples to mind here.

I just want to know where can I insert fade in fade out or animate function in this code, to give it a transitioning effect:

$(document).ready(function () {
$(".thumb").hover(function () {
    var dummyImg = $(this).attr("alt");
    $(this).attr("alt", $(this).attr("src"));
    $(this).attr("src", dummyImg);
}, function () {
    var dummyImg = $(this).attr("src");
    $(this).attr("src", $(this).attr("alt"));
    $(this).attr("alt", dummyImg);
});
});

Thank-you!

Answer 1

http://jsfiddle.net/Xm2Be/13/ There is an example how you could do that. Ofcourse, you can set lenght of fade effect by placing some number inside brackets. For examle .fadeToggle(5000) will have timing of 5 seconds.

Answer 2

You want to access the callback function of the fadeIn and fadeOut functions, this will allow you to make changes to the src image and what not. it would look something like this ->

$(document).ready(function () {
  $(".thumb").hover(function () {
    var dummyImg = $(this).attr("alt");
    $(this).fadeOut('slow', function(){
      //this is now the callback.
      $(this).attr("alt", $(this).attr("src"));
      $(this).attr("src", dummyImg);
      $(this).fadeIn('slow');
    });
  }, function () {
    var dummyImg = $(this).attr("src");
    $(this).fadeOut('slow', function(){
      //this is now the callback.
      $(this).attr("src", $(this).attr("alt"));
      $(this).attr("alt", dummyImg);
      $(this).fadeIn('slow');   
    });
  });
});

Answer 3

Maven,

Have you thought of using css webkit? This SO article goes into detail for crossfading images - at different rates. CSS Webkit Transition - Fade out slowly than Fade in

You can also make use of a basic event to fade-in/fade-out the image. This JQuery/JSFiddle SO article makes use of the this reference object: Jquery fadeOut on hover

The basic fade-in / fade-out structure from the JSFiddle.net documention is as follows:

$('#show').hover(function() {
    $(this).stop(true).fadeTo("slow", 0);
}, function() {
    $(this).stop(true).fadeTo("slow", 1);
});

~JOL

Answer 4

Personaly, I'd layer the two images (css) so the non-hover version is normally on top. Then in the hover function, add a $(this).fadeOut('fast') so that the underlying image is displayed.