CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1124927
user1124927

Reputation:

Jquery hover - How to make background color animation

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

Upvotes: 5

Views: 3415

Answers (3)

dku.rajkumar
dku.rajkumar

Reputation: 18568

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

Upvotes: 0

Scott
Scott

Reputation: 21882

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

Upvotes: 2

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9498

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 () {

Upvotes: 4

Related Questions