thumbnails fade in fade out

问题

This is the markup for the thumbnails:

<ul id="bgImages">
    <li>
        <a href="videos/.."><img class="thumb" src="images/background/thumb1.jpg" alt="" /></a>

    </li>
    <!-- BEGIN: Background Element -->

    <!-- END: Background Element -->

    <li>
        <a href="images/background/ibizabg2.jpg"><img class="thumb" src="images/background/thumb2.jpg" alt="" /></a>

    </li>
    <li>
        <a href="images/background/ibizabg3.jpg"><img class="thumb" src="images/background/thumb3.jpg" alt="" /></a>

    </li>
    <li>
        <a href="images/background/ibizabg4.jpg"><img class="thumb" src="images/background/thumb4.jpg" alt="" /></a>

    </li>

</ul>

and this is the css:

#bgImages{
list-style:none;
position:absolute;
left:0px;
bottom:50px;
height:92px;
background: url('images/@{ThemePrefix}-bgImages.png');
}
#bgImages li{
position:relative;
margin:0;
float:left;
padding:3px;
}
#bgImages img.thumb{
height:80px;
margin:0;
padding:3px 0 0 0;
cursor:pointer;


}
#bgImages li .thumbType{
opacity:0;
position:absolute;
width:20px;
height:20px;
right:3px;
bottom:7px;
background-color:@ColorFirst;
 }
 #bgImages li .thumbVideo{
opacity:0;
background-image: url('images/thumb_video.png');
 }
  #bgImages li .thumbImage{
opacity:0;
background-image: url('images/thumb_image.png');
 }

and some of the javascript that is used for thumbnails:

/* Sub Thumb Gallery */
function galeriThumbsMouseMove(e)
{
    // Horizontal Move
    galeriThumbsHorizontalMove(e.pageX);
    // Vertical Move
    if(e.pageY > $('#bgImages').position().top-10 && parseInt($('#bgImages').css('bottom'))<32)
        galeriThumbsMoveUp();
    else if(e.pageY < $('#bgImages').position().top-10)
        galeriThumbsMoveDown();
}
function galeriThumbsHorizontalMove(param_pageX){
    if((parseInt($('#bgImages').css('bottom'))>-40 && $('#bgImages').width()>$('#body-wrapper').width())){
        var posTop = parseInt((($('#body-wrapper').width()-$('#bgImages').width())/$('#body-wrapper').width())*param_pageX);
        if(posTop>0)
            posTop=0;
        $('#bgImages').animate({left:posTop}, {queue:false, duration:400, easing:'easeOutQuad'});
    }
}
function galeriThumbsMoveUp(){
    $('#bgImages').animate({bottom:32}, {queue:false, duration:300, easing:'easeOutQuad', complete:function(){ } } );
    $('#bgText').animate({bottom:147}, {queue:false, duration:300, easing:'easeOutQuad', complete:function(){ } } );
}
function galeriThumbsMoveDown(){
    $('#bgImages').animate({bottom:-0}, {queue:false, duration:300, easing:'easeOutQuad', complete:function(){ } } );
    $('#bgText').animate({bottom:64}, {queue:false, duration:300, easing:'easeOutQuad', complete:function(){ } } );
}

function bgImageMove(e){
    if(useFullImage && !useFitMode && activePlayer=='none')
    {
        if($('#body-wrapper').width()<$('#bgImageWrapper .new').width())
            var xPos = parseInt((($('#body-wrapper').width()-$('#bgImageWrapper .new').width())/$('#body-wrapper').width())*e.pageX);
        else
            var xPos = ($('#body-wrapper').width()-$('#bgImageWrapper .new').width())/2;
        if($('#body-wrapper').height()<$('#bgImageWrapper .new').height())
            var yPos = parseInt((($('#body-wrapper').height()-$('#bgImageWrapper .new').height())/$('#body-wrapper').height())*e.pageY);
        else
            var yPos = ($('#body-wrapper').height()-$('#bgImageWrapper .new').height())/2;
        $('#bgImageWrapper .new').animate({left:xPos, top:yPos}, {queue:false, duration:400, easing:'easeOutQuad'});
    }
}

function galleryThumbs(activeItem, mode){
    $('#bgImages li a').live('click',function(){
        return false;
    });

    var totalBgImagesWidth = 0;
    $('#bgImages li img.thumb').each(function(){
        totalBgImagesWidth+=$(this).width()+6;
    });
    totalBgImagesWidth+=2;
    $('#bgImages').css('width', totalBgImagesWidth+'px');

    $('#bgImages li').hover(function(){
            $(this).find('img.thumb').stop().animate({opacity:'1'}, 500);
            $(this).find('.thumbType').stop().animate({opacity:'1'}, 500);
    },function(){
        if(!$(this).hasClass('active')){
            $(this).find('img.thumb').stop().animate({opacity:'.3'}, 500);
            $(this).find('.thumbType').stop().animate({opacity:'0'}, 500);
        }
    }).click(function(){
        if(!$(this).hasClass('active') && !bgRunning)
        {
            clearInterval(bgTimer);
            $('#bgImages li').removeClass('active');
            $(this).addClass('active');
            runBg();
        }
    });

    $('#bgImages li').each(function(){
        var mediaType = getMediaType($(this).find('a').attr('href'));
        if(mediaType=='youtube' || mediaType=='vimeo' || mediaType=='jwplayer')
            $(this).append($('<div></div>').addClass('thumbType thumbVideo').css('opacity', '0'));
        else
            $(this).append($('<div></div>').addClass('thumbType thumbImage').css('opacity', '0'));
    });

    if(activeItem==undefined){
        if($('#bgImages li.active').length!=1){
            $('#bgImages li').removeClass('active');
            $('#bgImages li:first-child').addClass('active');
        }
    }else{
        $('#bgImages li').removeClass('active');
        $('#bgImages li a[href="'+activeItem+'"]').parent().addClass('active');
        if($('#bgImages li.active').length!=1){
            $('#bgImages li').removeClass('active');
            $('#bgImages li:first-child').addClass('active');
        }
    }

I want to make the bottom thumbnails visible on pageload and when I move my cursor outside of the thumbnails area ( like is now) to have a fadeout effect instead of movedown effect. Is this possible? (It's very important for me) And if it's possible give me some indications of how to do this.

If you don't understand exactly what I'm trying to achieve please look at this live example.

Here is my approach.

来源：https://stackoverflow.com/questions/9155453/thumbnails-fade-in-fade-out