Fading an image into another image

Question

So I'm trying to make a slider with jQuery, but I can't get the effect right... I want it to be so when I click an image it fades into another one like on this slider: http://na.leagueoflegends.com

The normal fadeIn()/fadeOut() effects aren't exactly what I'm looking for, I want it to be smoother and also not to fade into black before the second image fades in.

Would putting two divs (one absolutely positioned over the other) and then fading the one on top work?

Thanks in advance, cheers!

Answer 1

Something like this should work

$("your img 1").animate({opacity : 0}, 300, function(){ // Fade out
    $("your img 2").animate({opacity : 1}, 200, function(){ // Fade in

    });
});