Как скрыть предыдущий слайд в простом слайд-шоу jQuery?

Я создаю онлайн-портфолио для своей девушки и для этого простое слайд-шоу изображений с плавными переходами. Я хочу иметь возможность «скрыть» предыдущий «последний активный» слайд, когда отображается новый «активный».

Я изменил представленное здесь слайд-шоу (http://jonraasch.com/blog/a-simple-jquery-slideshow), поэтому вместо автоматического цикла оно управляется кнопками «предыдущий/следующий». Это все отлично работает. В отличие от приведенного выше примера, мне нужно иметь изображения разного размера в слайд-шоу.

Проблема: то, как работает слайд-шоу, как стопка изображений, я вижу предыдущее изображение за текущим «активным». Например. при переключении между вертикальным (портретным) изображением и горизонтальным (пейзажным) изображением я вижу пейзаж за портретом.

Я пробовал метод jQuery .hide() в функции $nextSlide(), но не уверен, что это правильный способ сделать это. Я полный новичок в javascript и jQuery.

HTML:

<div id = "slideshow">
    <div class = "active">
        <img src = "horizontal.jpg">
    </div>

    <div>
        <img src = "vertical.jpg">
    </div>

</div>

<div id = "controls">
<span class = "control-prev">prev</span> / <span class = "control-next">next</span>
</div>

CSS:

#slideshow {
    position:relative;
    height:400px;
}

#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 400px;
    background-color: white;
}

#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:9;
}

#slideshow DIV IMG {
    height: 350px;
    display: block;
    border: 0;
    margin-bottom: 10px;
}

JavaScript:

function nextSlide() {
    var $active = $('#slideshow DIV.active'); 
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last'); 


    var $next =  $active.next().length ? $active.next() 
        : $('#slideshow DIV:first');


    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 300, function() {
            $active.removeClass('active last-active');
        });
}
$(".control-next").click(function(){
    nextSlide();
    });

´´´

The goal is to have a slideshow that doesn't show the images like a stack. I bet the solution is very simple, but I can't work it out.