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

小提琴