javascript - Jquery效果-鼠标悬停时背景颜色变化；

Question

我正在尝试创建一种效果，即当鼠标悬停在其上时，背景颜色从左向右更改。 我试过这个:

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>

但是，无法正常工作。如果我将鼠标多次放在 div 上，则会多次产生效果，但不会。 尝试多次放置鼠标并离开。这种效果会发生很多次。 有什么帮助吗？

Answer 1

您错误地使用了stop。像这样使用它:

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

如果你像英语一样思考就很容易理解:

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

<强> Fiddle