effet de glissement avec jquery

Question

Je voudrais créer un effet de diapositive à l'aide 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 tout en faisant glisser 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 car le contenu de divs est le chargement via ajax, donc je ne peux pas le positionner avec précision avant qu'il ne soit chargé.

Toute 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 l'intérieur d'un parent, et puis quand vous voulez les faire glisser, animer la partie supérieure de chaque div le nombre correct de pixels. La solution I a fourni au-dessus de chaque <div> plus ou moins ensemble à une hauteur fixe de 20px (via line-height).

Le <div> mère 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');
});

Voir la démo de travail ici.

Answer 3

Je pris ce que Sarfraz fourni et modifié légèrement en fonction de ce que je pense que vous recherchez. Par souci de la démo, j'ai aussi fait ce feu sur l'événement click. Vous trouverez 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');
});