.animate in jQuery not working

Question

When I hover the button, the background color is not changing.

My 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>

My html:

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

What am I missing?

http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — Adam Merrifield, Dec 06 '11 at 13:24
Please format your code so that other people can read it and help you. — Felix Kling, Dec 06 '11 at 13:25

score 1 · Answer 1 · answered Dec 06 '11 at 13:32

Here is a JSfiddle with it working: JSFiddle

You have to include jQuery UI and then use the following jQuery code.

$(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);  
    });  
});

Your code was fine, You just have to include jQuery UI. But best to also use the stop function.

score 1 · Accepted Answer · answered Dec 06 '11 at 13:34

Answer is 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 code

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

.animate in jQuery not working

2 Answers2