Bonjour,
J'ai animé un élément, pour le faire se déplacer de gauche à droite, d'un point A à un point B.
L'animation se fait de A à B sur une seconde,
quand l'élément arrive à B, il revient instantanément à A (sans animation).
Ça fonctionne bien.
Ensuite j'ai rajouté une boucle, pour le faire 3 fois,
et j'ai aussi mis mis un 2ème élément à animer dans cette boucle.
Ça fonctionne bien.
Je montre d'abord le code :
// HTML
<div id="element_1"></div>
<div id="element_2"></div>
// CSS
div {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
#element_1 {
background-color: yellow;
}
#element_2 {
background-color: orange;
top: 150px;
}
// jQuery
var element_1 = $(' #element_1' );
var element_2 = $(' #element_2' );
function move($element, $left)
{
$element.animate({
left: "+=" + 100,
}, {
duration: 1000,
complete: function() { // permet de revenir à la position initiale
$element.css('left', $left);
}
});
}
for (var i = 0; i < 3; i++)
{
move(element_1, element_1.css("left"));
move(element_2, element_2.css("left"));
}
Ce que je veux
Maintenant, ce que j'aimerai, c'est faire en sorte que l'élément 2 attende 1 sec, à CHAQUE fois avant de démarrer une animation.
C'est à dire :
pause (1s)
Animation : A - B (1s)
pause (1s)
Animation : A - B (1s)
pause (1s)
Animation : A - B (1s)
J'ai essayé de le faire comme ça :
// jQuery
for (var i = 0; i < 3; i++)
{
move(element_1, element_1.css("left"));
setTimeout(function() {
move(element_2, element_2.css("left"));
}, 1000);
}
Mais ça ne fonctionne pas.
Ce que j'obtiens
pause (1s)
Animation : A - B (1s)
Animation : A - B (1s)
Animation : A - B (1s)
Je ne vois pas où/comment placer ma pause.