transición en efecto prev/next

[kenproxd]

Hola,

Tengo el siguiente código que hace que un conjunto de divs vayan pasando según el botón que se presione (prev/next):

Código Javascript:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
// selects all the divs of class='sample',hides them, finds the first, and shows it
$('div.portafolios').hide().first().show();
 
// binds a click event-handler to a elements whose class='display'
$('a.display').on('click', function(e) {
    // prevents the default action of the link
    e.preventDefault();
 
    // assigns the currently visible div.sample element to a variable
    var that = $('div.portafolios:visible'),
        // assigns the text of the clicked-link to a variable for comparison purposes
        t = $(this).text();
 
    // checks if it was the 'next' link, and ensures there's a div to show after the currently-shown one
    if (t == 'next' && that.next('div.portafolios').length > 0) {
        // hides all the div.sample elements
        $('div.portafolios').hide();
 
        // shows the 'next'
        that.next('div.portafolios').show()
    }
    // exactly the same as above, but checking that it's the 'prev' link
    // and that there's a div 'before' the currently-shown element.
    else if (t == 'prev' && that.prev('div.portafolios').length > 0) {
        $('div.portafolios').hide();
        that.hide().prev('div.portafolios').show()
    }
});
});//]]>  
</script>
 

Código HTML:

<div class="portafolios">div1</div>
<div class="portafolios">div2</div>
<div class="portafolios">div3</div>
<a href="#" id="display" class="display">next</a>
<a href="#" id="display1" class="display">prev</a>
 

Funciona perfectamente, el problema es que la transición entre div y div es muy brusca y quería saber si había algún método para hacer que esta transición tome unos segundos en realizarse (de izquierda a derecha y viceversa).

Espero se haya entendido y puedan ayudarme