effetto slide con jQuery

Question

Mi piacerebbe creare un effetto di scorrimento utilizzando jQuery. Ho diversi div di:

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

L'idea è che appare div_2 facendo scorrere e "spinta" div_1 da vista, un po 'come una finestra a scorrimento (orizzontale o verticale). Penso che non posso usare lo scorrimento reale perché il contenuto div è carico tramite la tecnologia AJAX, quindi non posso posizionarlo esattamente prima che venga caricato.

Qualche idea?

TIA

Greg

Answer 1

Greg, suona come siete alla ricerca di qualcosa di simile che ho fatto qui:

http://jsfiddle.net/2E5Qv/

Se è così, ciò che si vuole fare è quello di contenere tutti quei <div>s all'interno di un genitore, e poi quando si vuole farle scorrere, animano la parte superiore di ogni div il numero corretto di pixel. La soluzione che ho fornito sopra ha ogni <div> più o meno impostato ad un'altezza fissa di 20px (via line-height).

Il <div> genitore agisce come una sorta di finestra per mostrare solo il contenuto corrente.

Answer 2

Vuoi dire che in questo modo:

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

Vedere il lavoro demo qui.

Answer 3

ho preso quello che Sarfraz fornito e modificato leggermente in base a quello che penso che stavi cercando. Per il bene della demo, ho anche fatto che il fuoco contro l'evento click. È possibile trovare l'esempio di lavoro qui: 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');
});