5
<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() is not working at all. I just try to set either background color or border size should be increased when mouse hover.

Sameera Thilakasiri
  • 9,452
  • 10
  • 51
  • 86

3 Answers3

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 () {
Sameera Thilakasiri
  • 9,452
  • 10
  • 51
  • 86
2

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

Scott
  • 21,475
  • 8
  • 43
  • 55
0

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

Community
  • 1
  • 1
dku.rajkumar
  • 18,414
  • 7
  • 41
  • 58