淡入幻灯片中的图像？

Question

Please see this fiddle http://jsfiddle.net/rabelais/ayaK2/

1. Here is a slideshow of images and videos.

2. All the images and videos are full screen.

3. When the user clicks on each image/video it displays the next one along.

MY QUESTION: How do I make the images in this slideshow fade in?

$(function () {

var win = $(window),
    fullscreen = $('.full'),
    image = fullscreen.find('img, video'),
    imageWidth = image.width(),
    imageHeight = image.height(),
    imageRatio = imageWidth / imageHeight,
    currentSlide = 0,
    numSlides = $('.full').length;

function resizeImage() {
    var winWidth = win.width(),
        winHeight = win.height(),
        winRatio = winWidth / winHeight;

    if (winRatio > imageRatio) {
        image.css({
            width: winWidth,
            height: Math.round(winWidth / imageRatio)
        });
    } else {
        image.css({
            width: Math.round(winHeight * imageRatio),
            height: winHeight
        });
    }
}

function advanceToSlide(slidePos){
    slide = $('.full').eq(slidePos);
    slide.show();
    var video = $('video', slide);

    $('video').each(function(){
        $(this).get(0).pause();
    })

    if(video.length){
        console.log(video.get(0).play());
    }   
}

$('.full').on('click', function(){
    $('.full').hide();
    if(currentSlide < numSlides - 1){
        currentSlide = currentSlide + 1;
    } else{
        currentSlide = 0;
    }
    advanceToSlide(currentSlide);
});

$('.full:gt(0)').hide();
resizeImage();

});

Answer 1

http://jsfiddle.net/isherwood/ayaK2/2

function advanceToSlide(slidePos){
    slide = $('.full').eq(slidePos);
    slide.fadeIn();
    ....