Discussion :

[nims]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[danielhagnoul]

Bonjour.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
	});
});

[nims]

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

[nims]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

[danielhagnoul]

Bonsoir.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[nims]

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à