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