CODEWITHSUNDEEP
jquerygoogle-chrome
mrwienerdog
mrwienerdog

Reputation: 825

jQuery animate to change background color (not working in Chrome)

I have a simple horizontal menu. All I want is for the background of the li a I am hovering over to animate from white to gray. All is working well in Firefox and IE, but not in Chrome. What could the reason be?

Code:

<script type="text/javascript">
$(document).ready(function(){
    $("#nav ul li a").hover(function() {
        $(this).stop().animate({ backgroundColor: '#E5E5E5' }, 500);
    },function(){
          $(this).stop().animate({backgroundColor: '#FFF' }, 500);
     })
})
</script>

and the HTML:

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Estimator</a></li>
        <li><a href="#">Products & Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div><!--end of nav div-->

I know this is REALLY simple stuff, I've done it many times before. But like I said, it doesn't work in Chrome.

FIXED:

I just changed plugins. As I said, it's been a while since I've done anything with jQuery. Completely forgot about jQuery UI. Thanks everyone!

Upvotes: 0

Views: 2615

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47667

I've tried it ( here ) and it doesn't work for me in any browser.

Which is the expected outcome since jQuery doesn't support color animations out of the box. You have to use the jQuery UI ( which is huge ) or a plugin like this

As an alternative you can do this with CSS3 transitions - DEMO

a {
    -webkit-transition: background-color .5s;
       -moz-transition: background-color .5s;
        -ms-transition: background-color .5s;
         -o-transition: background-color .5s;
            transition: background-color .5s;
}  

a:hover {
    background-color: #5f5f5f;
}
​

Upvotes: 3

Related Questions