effet de diapo avec jquery

Question

Je voudrais créer un effet de diapositive en utilisant jQuery. J'ai plusieurs 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> 

L'idée est que div_2 apparaît en glissant et « pousser » div_1 hors de la vue, un peu comme le défilement d'une fenêtre (horizontal ou vertical). Je pense que je ne peux pas utiliser le défilement réel parce que le contenu des divs se charge via ajax, donc je ne peux pas le positionner précisément avant qu'il soit chargé.

Une idée?

TIA

greg

Answer 1

Greg, il semble que vous cherchez quelque chose comme je l'ai fait ici:

http://jsfiddle.net/2E5Qv/

Si oui, ce que vous voulez faire est de contenir tous ces <div> s dans un parent, puis lorsque vous voulez les faire glisser, animez le haut de chaque div le nombre correct de pixels. La solution que j'ai fournie ci-dessus a chacun <div> plus ou moins fixé à une hauteur fixe de 20px (via line-height).

Le parent <div> agit comme une sorte de fenêtre pour afficher uniquement le contenu actuel.

Answer 2

Vous voulez dire comme ceci:

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

See the working demo here.

Answer 3

J'ai pris ce que Sarfraz a fourni et je l'ai légèrement modifié en fonction de ce que je pense que vous cherchiez. Pour le plaisir de la démo, je l'ai également fait feu sur l'événement click. Vous pouvez trouver l'exemple de travail ici: 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'); 
});