How can I add fade effect to this jQuery Image Swap Gallery

Question

I was wondering how can I add a fade effect when hovering using this example http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm

I was wondering if its possible to achieve something like this www.bungie.net

Here's the code used in the example

$(document).ready(function() {
    // Image swap on hover
    $("#gallery li img").hover(function(){
        $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
    });
    // Image preload
    var imgSwap = [];
     $("#gallery li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

Answer 1

I used bruchowski's code which worked great for me. I did change .hover to .mouseover because I was getting a double fade effect when mousing out and I just wanted the last moused over image to stick.

I'm also very new to jquery and at first pasted it in the wrong place. Once I placed it directly before $(imgSwap).preload(); it worked.

And I slowed the fade down.

So my code is as follows:

<script type="text/JavaScript">
// prepare the form when the DOM is ready 
$(document).ready(function() {
    $("#gallery li img").hover(function(){
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
 $("#gallery li img").each(function(){
    imgUrl = this.src.replace('thumb/', '');
    imgSwap.push(imgUrl);
});
$("#gallery li img").mouseover(function(){
if ($("#main-img:animated").length){
    $("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 1400);
}); $(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}
</script>

Thanks!!!

Answer 2

In this part of the code that is like this in their example

   $("#gallery li img").hover(function(){
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});

Change to

   $("#gallery li img").hover(function(){
    $('#main-img').attr('src',$(this)
                   .fadeOut('fast')            
                   .attr('src').replace('thumb/', ''));
});

Answer 3

This is a quick solution (you would add this to their existing code, do not edit what they already have)

$("#gallery li img").hover(function(){
    if ($("#main-img:animated").length){
        $("#main-img:animated").stop();
    }
    $("#main-img").css("opacity", "0").animate({"opacity":"1"}, 300);
});