Animer une grande image se trouvant dans un div plus petit (overflow:hidden..)

Bonsoir à tous !

Je souhaite faire bouger une image se trouvant dans un div.
L'image est plus grande que le div mais la propriété overflow:hidden cache ce qui dépasse du div.

Si je fais quelque chose comme ceci:

Code:

---

1 2 3 4 5 6 7 8 9

$(function() { $("#image").click(function(){   for(var i = 0;i<100;i++) $("#image").animate({top:"-=5px",left:"-=5px"});   }); })

---

Mais c'est saccadé, pas fluide du tout.
Vous voyez l'effet souhaité !?
Existe t il un plugin ? je sais pas si cet effet a un nom particulier...

Comment faire cela pour que ca soit "beau" ?

Merci d'avance pour votre aide!!

Bonjour.

Exemple :

Code:

---

1 2 3 4 5 6 7 8

$(function(){ $("#image").click(function(){ // http://api.jquery.com/animate/ // .animate( properties, [ duration ], [ easing ], [ callback ] ); // 2000 = 2 secondes $(this).animate({top:"-=5px",left:"-=5px"}, 2000); }); });

---

Bonjour,

C'est exactement ce que j'ai fait mais c'est la fluidité que je recherche ! Car en enchainant plusieurs instruction comme celle ci ça rend quelque chose de pas beau du tout ...

Et re !

ok, en fait voilà le truc:

Est ce possible d'enchainer des animates sans qu'il y est un arrêt entre les deux ?

Code:

---

1 2 3

$(this).animate({left:"-=200px"}); $(this).animate({left:"-=200px",top:"-=200px"});

---

Ici, entre les deux animations, l'image s'arrête puis s'anime à nouveau...

Possible sans arrêt?

Bonsoir.

On peut chaîner, mais on remarque toujours l'enchaînement. Exemple :

Code:

---

1 2 3

$("#imgID").animate({top:"+=50px",left:"+=50px"}, 800) .animate({top:"+=50px",left:"+=50px"}, 800) .animate({top:"-=50px",left:"-=50px"}, 800);

---

C'est bien ce que je pensais d'après mes tests...

Aucun moyen (plugins ou autre) d'avoir l'effet voulu?
J'ai fait quelques recherches mais rien dans ce style là