Effet Jquery - changement de couleur de l'arrière-plan au passage de la souris ;

Question

J'essaie de créer un effet qui, lorsque la souris passe sur ceci, change la couleur d'arrière-plan de gauche à droite. J'ai essayé ceci :

http://jsfiddle.net/WVWKE/

$('#div1').mouseover(function(){
$('#back').animate({width: '200px'}, 1000);
});
$('#div1').mouseout(function (){
$('#back').animate({width: '0px'}, 1000).stop();
});

#div1{
height:200px;
width:200px;
background-color:green;
float:left;
}

#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}

<div id="div1">
<div style="position:absolute">That was amazing!</div>
<div id="back">
</div>
</div>

Mais cela ne fonctionne pas correctement. Si je mets la souris plusieurs fois sur la div, cela fait l'effet plusieurs fois et ne fonctionne pas. J'essaie de mettre la souris et de la laisser plusieurs fois. L'effet se produit plusieurs fois. Un peu d'aide ?

Answer 1

Vous utilisez stop incorrectement. Utilisez-le comme suit :

$('#div1').mouseover(function (){
    $('#back').stop().animate({width: '200px'}, 1000);
});
$('#div1').mouseout(function (){
    $('#back').stop().animate({width: '0px'}, 1000);
});

C'est facile à comprendre si vous y pensez comme si c'était de l'anglais :

$('#back')                         // take "back"
.stop()                            // and stop it
.animate({width: '200px'}, 1000);  // and animate it

Violon