petit rebond avec jQuery

Jquery animate

http://api.jquery.com/animate/

une fois la première animation fini tu exécute une fonction qui ramène le cadre sur la bonne position

Salut, je viens tout juste de réaliser un système semblable ce que tu cherche.
En fait, tu créé un div de la largeur "totale", par exemple, si ton bloc fait 200px tu créé un bloc de 2x200px, soit 400px. Je l’appellerai #A.
Tu mets en place le contenu sans te soucier "du dépassement", à l'intérieur d'un div "global", que j’appelle #B, que tu passe en "position: relative" dans ton css.
Ensuite, pour masquer le contenu qui "dépasse", grâce au css, en appliquant un "overflow: hidden" sur le div #A. (Voir le tutoriel : Tutoriel Vidéo jQuery : Slider Javascript avec jQuery).

Ce qui donne pour rappelle :

#A{
    width: 200px;
    height: 200px;
    overflow: hidden;
}
#B{
    width: 400px;
position: relative;
}

.

Ainsi, le bloc ne laisse apparaitre que la partie de gauche. La partie de droite étant masquée par l'overflow appliqué sur son parent #A.
A présent, il faut animer le propriété css "left: *px" du div #B pour "remplacer le contenu".
A partir de la, tu peux tester ton "montage" avec jQuery, avec firebug par exemple.

$("#B").animate({
      left: -200
    });

Normalement, tu devrai voir une animation laissant apparaitre le contenu de droite.

Si c'est le cas, tu n'as plus qu'à créer une fonction ".click" qui active cette animation.
Pour l'effet de rebond, je ne sais pas si il existe une fonction ou un plugin pour le gérer de façon "fluide", mais pour ma part j'ai utilisé la fonction .animate()

Avec un code de ce type, tu as un effet proche de celui de Grafikart

$("#B").animate({
      left: -215
    });
$("#B").animate({
      left: -200
    });

Si tu as des questions, n'hésites pas ;)

@Romain56 petite erreur avec ton code les 2 effets sont enclenchés en même temps. Utilise une function callback
Sinon charger une partie de jquery ui juste pour un effet vaut pas vraiment le coup, mais en effet tu a déjà des petits effets avec jquery ui

$("#B").animate({
      left:-215
    },500,function(){
        $("#B").animate({left: -200},200); 
    });

Autant pour moi, c'est vrai que c'est plus propre ainsi, mais ça fonctionne en 2 parties et c'est peut être plus facile à comprendre pour un débutant.

Néanmoins je te remercie pour ta correction.