JQuery hover - How to make background color animation

Question

<div class="post_each">
    <h1 class="post_title">Apartamentos 1 comodo</h1>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb last" src="1.jpg"/>
</div>
<div class="post_each">
    <h1 class="post_title">Apartamentos 2 comodo</h1>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb" src="1.jpg"/>
    <img class="thumb last" src="1.jpg"/>
</div>
<script type="text/javascript">
    $('img.thumb').hover(function {
        $(this).animate({"background" : "white"}, 600);
    });
</script>

hover () doesn't work at all. I'm just trying to set either the background color or the border size should be increased on hover.

Answer 1

You cannot change colors (at least in this way), only properties with one numeric value are allowed. There is a separate color animation plugin that you need to add.

There are no parentheses in this anonymous function:

$('img.thumb').hover(function () {

Answer 2

You do not need jquery ....

.thumb {
background: #000;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;}

.thumb:hover {
background: #fff;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;}

Demo here

Answer 3

..

$('img.thumb').hover(function(){
   $(this).animate({ backgroundColor: 'white' }, 600);
});

jQuery backgroundColor animation jQuery animate backgroundColor