。jQuery中的动画不起作用

Question

当我将鼠标悬停在按钮上时，背景颜色不变。

我的jQuery：

<script type="text/javascript" src="/js/jquery.js"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    $(".reject").hover(function() { 
     $(this).animate({background: '#000'}, 1000); 
    }, function(){ 
     $(this).animate({background: '#333'}, 1000); 
    }); 
}); 
</script> 
<style type="text/css"> 
    .reject{padding:10px;font-size:20px;background:#F00;} 
</style> 

我的HTML：

<button class="reject">Reject</button> 

我缺少什么？

Answer 1

答案是this
Check this online demo

<script type="text/javascript" src="/js/jquery.js"></script> 
//Add this script 
<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    $(".reject").hover(function() { 
     $(this).animate({backgroundColor: '#000'}, 1000); 
    }, function(){ 
     $(this).animate({backgroundColor: '#333'}, 1000); 
    }); 
}); 
</script> 
<style type="text/css"> 
    .reject{padding:10px;font-size:20px;background:#F00;} 
</style> 

HTML代码

<button class="reject">Reject</button> 

Answer 2

这里是它的jsfiddle工作：JSFiddle

你必须包括jQuery UI的，然后使用下面的jQuery代码。

$(document).ready(function(){ 
    $(".reject").hover(function() { 
     // Stop the previous animation (if any) and then animate 
     $(this).stop().animate({backgroundColor: '#000'}, 1000); 
    }, function(){ 
     // Stop the previous animation (if any) and then animate 
     $(this).stop().animate({backgroundColor: '#FFF'}, 1000); 
    }); 
}); 

你的代码是好的，你只需要包括jQuery的用户界面。但最好也使用停止功能。