Je débute en jQuery et pour apprendre, j'ai suivi le cours sur les animations : http://www.finalclap.com/tuto/cours-jquery-61/animation-65/
Ma question porte sur l'exemple 3 (animation d'un rectangle et d'un boulet) que j'ai souhaité reproduire.
- Code: Tout sélectionner
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Animations liées : tirer à boulet rouge !</title>
<script src="js/jquery-3.2.1.min.js"></script>
<style type="text/css">
#rectangle{
position: absolute;
top: 50px;
left: 20px;
width: 90px;
height: 70px;
background: #663E10;
}
#boulet{
position: absolute;
top: 5px;
left: 5px;
width: 60px;
height: 60px;
background: #B1221C;
opacity: 0;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#bouton').click(function(){
$('#rectangle').animate({
left:'100px',
top:'220px'
}, 1000, function(){
$('#boulet').animate({
opacity:'1',
left: '600px'
}, 3000, 'swing');
})
.animate({
left: '-=100px'
});
});
$('#boulet').mouseover(function(){
$(this).animate({
top: '-=100px'
});
});
$('#boulet').mouseout(function(){
$(this).animate({
top: '+=100px'
});
});
});
</script>
</head>
<body>
<input type="button" id="bouton" value="Lancer l'animation">
<div id="rectangle">
<div id="boulet"></div>
</div>
</body>
</html>
Le hic, c'est que je ne comprends pas ce morceau :
- Code: Tout sélectionner
$('#bouton').click(function(){
$('#rectangle').animate({
left:'100px',
top:'220px'
}, 1000, function(){
$('#boulet').animate({
opacity:'1',
left: '600px'
}, 3000, 'swing');
})
.animate({
left: '-=100px'
});
});
En fait, il est indiqué d'abord des instructions pour le rectangle
- Code: Tout sélectionner
$('#rectangle').animate({
left:'100px',
top:'220px'
}, 1000, function(){
ensuite des instructions pour le boulet
- Code: Tout sélectionner
$('#boulet').animate({
opacity:'1',
left: '600px'
}, 3000, 'swing');
})
et on a ensuite des instructions à nouveau pour le rectangle
- Code: Tout sélectionner
.animate({
left: '-=100px'
});
});
mais ce dernier code s'exécute avant l'animation du boulet alors qu'il est placé après les instructions qui concernent le boulet... pourquoi ?
Si je tente de placer ce morceau de code à la suite des premières instructions du rectangle (ce qui me paraîtrait logique à première vue), l'animation ne fonctionne plus correctement...
Je suis preneur de vos éclairages car là, je suis perdu !!
Par avance, un grand merci pour votre aide !
Jorsen
SitemapIndex
Flux RSS