Animate color for a div when mouse hover

Question

I need change the color of a div when the user go over it.

This script I'm trying does not work. Any idea how to fix it?

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $("#arrow-l").hover(
    function() {
        $(this).stop().animate({"background-color": "#999999"}, "slow");
    },
    function() {
        $(this).stop().animate({"background-color": "#BFBFBF"}, "slow");
    });
    </script>
    </head>
...
    <body>
     <div id="arrow-l">prev.</div>

score 1 · Accepted Answer · edited May 23 '17 at 09:59

1

Background color animation won't work using jQuery animate. You have to use jQuery UI for that or use jquery color animation plugin.

jQuery animate backgroundColor

http://www.bitstorm.org/jquery/color-animation/
http://docs.jquery.com/UI/Effects/ColorAnimations

edited May 23 '17 at 09:59

Community

1
1

answered Feb 18 '12 at 16:44

Praveen Vijayan

6,521
2
29
28

score 1 · Answer 2 · answered Feb 18 '12 at 16:49

From jQuery API doc:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).

Maybe this helps. Using opacy e. g. worked fine for me.

score 0 · Answer 3 · answered Feb 18 '12 at 16:46

Do you only want to change the background color?

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
 $(function() {
   $('#arrowl').hover( function(){
      $(this).css('background-color', '#F00');
   },
   function(){
      $(this).css('background-color', '#E0EAF1');
   });
});

    </script>
    </head>
...
    <body>
     <div id="arrowl">prev.</div>

score -1 · Answer 4 · answered Feb 18 '12 at 18:15

-1

Refer to LIVE DEMO AT JSFIDDLE

$("#arrow-l").hover(
    function() {
        $(this).css({'background-color': '#999999'});
    },
    function() {
        $(this).css({'background-color': '#BFBFBF'});
    }
);


 <div id="arrow-l">prev.</div>

answered Feb 18 '12 at 18:15

Siva Charan

17,940
9
60
95

Animate color for a div when mouse hover

4 Answers4