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

这是一个有效的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 UI。但最好也使用停止功能。

Answer 2

答案是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>

jQuery中的.animate不起作用

2 个答案: