Gleiteffekt mit jquery

Question

Ich mag einen Dia-Effekt erzeugen mit jQuery. Ich habe mehrere divs:

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

Die Idee ist, dass div_2 erscheint während des Gleitens und „Schieben“ div_1 aus den Augen, ein wenig wie ein Fenster Scrollen (horizontal oder vertikal). Ich glaube, ich nicht unbedingt eine Rolle verwenden kann, weil die divs' Content Laden über Ajax ist, so dass ich es nicht positionieren kann genau bevor es geladen wird.

Jede Idee?

TIA

greg

Answer 1

Greg, es klingt wie Sie etwas suchen, wie ich hier getan haben:

http://jsfiddle.net/2E5Qv/

Wenn ja, was Sie wollen, zu tun ist, alle diese <div>s in einem Elternteil enthalten, und dann, wenn Sie sie verschieben möchten, animieren die Spitze jedes div bis die richtige Anzahl von Pixeln. Die Lösung I oben angegeben hat jede <div> mehr oder weniger festgelegt, um eine feste Höhe von 20 Pixel (via line-height).

Die Mutter <div> fungiert als eine Art Fenster nur den aktuellen Inhalt zu zeigen.

Answer 2

Du meinst, wie folgt aus:

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

Siehe die Arbeits Demo hier.

Answer 3

Ich nahm, was Sarfraz zur Verfügung gestellt und verändert sie leicht auf das, was ich denke, die Sie gesucht haben. Aus Gründen der Demo habe ich es auch auf dem Click-Ereignis ausgelöst. Sie können das Arbeitsbeispiel finden Sie hier: 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');
});