<div class="post_each">
    <h1 class="post_title">Apartamentos 1 odo</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 odo</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() is not working at all. I just try to set either background color or border size should be increased when mouse hover.

<div class="post_each">
    <h1 class="post_title">Apartamentos 1 odo</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 odo</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() is not working at all. I just try to set either background color or border size should be increased when mouse hover.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 27, 2012 at 6:53 Sameera Thilakasiri 9,5081010 gold badges5353 silver badges8787 bronze badges asked Jan 1, 2012 at 10:45 user1124927user1124927 1

• Unless you've got another plugin, or you're using jQuery UI, jQuery can't animate colours. – David Thomas Commented Jan 1, 2012 at 10:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can’t animate colors (at least this way), only properties with one numeric value are allowed. There is a separate color animation plugin you need to add.

That anonymous function is missing parentheses:

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

You don't 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

you can use color plugin.. reference

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

you can also refer previous threads jQuery backgroundColor animation and jQuery animate backgroundColor