efecto de diapositivas con jquery

Question

Me gustaría crear un efecto deslizante con jQuery. Tengo varios div de:

<div id='div_1'>content currently displayed</div>
<div id='div_2' style="display:none">content to be loaded</div>
<div id='div_3' style="display:none">content to be loaded</div>

La idea es que aparece div_2 mientras se desliza y "empujar" div_1 fuera de la vista, un poco como una ventana de desplazamiento (horizontal o vertical). Creo que no puedo utilizar el desplazamiento real, porque el contenido de los divs' es la carga a través de AJAX, así que no puedo posicionar con precisión antes de que sea cargado.

¿Alguna idea?

TIA

Greg

Answer 1

Greg, suena como que busca algo así como lo que he hecho aquí:

http://jsfiddle.net/2E5Qv/

Si es así, lo que quiere hacer es contener todos esos <div>s dentro de una matriz, y luego cuando se quiere deslizar ellos, animar la parte superior de cada div hasta el número correcto de píxeles. La solución I proporcionada anteriormente tiene cada <div> más o menos conjunto a una altura fija de 20 píxeles (a través de line-height).

El <div> matriz actúa como una especie de ventana para mostrar sólo el contenido actual.

Answer 2

¿Quieres decir como esto:

$('#div_2').slideDown('slow', function(){
  $('#div_1').slideUp('slow');
});

Ver la demostración de trabajo aquí.

Answer 3

Tomé lo que proporciona Sarfraz y lo modificó ligeramente en función de lo que creo que estaba buscando. En aras de la demo, también lo hizo fuego sobre el evento click. Usted puede encontrar el ejemplo de trabajo aquí: http://jsbin.com/emowu3/3

$('#div_1').click(function(){
    $('#div_1').slideUp('slow');
    $('#div_2').slideDown('slow');
});
$('#div_2').click(function(){
    $('#div_2').slideUp('slow');
    $('#div_3').slideDown('slow');
});
$('#div_3').click(function(){
    $('#div_3').slideUp('slow');
    $('#div_1').slideDown('slow');
});