。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的用戶界面。但最好也使用停止功能。