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