миниатюры исчезают в исчезают

Question

Это разметка для миниатюр:

<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>

и это 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');
 }

и некоторые из JavaScript, которые используются для миниатюр:

/* 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');
        }
    }

Я хочу сделать нижние миниатюры видимыми при загрузке страницы и когда я перемещаю курсор за пределы области миниатюр (как сейчас), чтобы получить эффект затухания вместо эффекта перемещения. Это возможно? (Это очень важно для меня) И если это возможно, дайте мне несколько указаний, как это сделать.

Если вы точно не понимаете, чего я пытаюсь достичь, пожалуйста, посмотрите на этот пример .

Здесь - мой подход.