JQuery animate() doesnt work with my usage while css() works fine

Question

My JQuery: //script.js

$(document).ready(
function()
{
$(".image").bind('mouseenter', 
function()
{
    $(this).stop().animate(
    {
        backgroundColor: "blue"
    },
    {
        queue:false,
        duration:300,
        easing: "swing"
    });
});
$(".image").bind('mouseleave',
 function()
{
    $(this).stop().animate(
    {
         backgroundColor: "green"
    },
    {
        queue:false,
        duration:300,
        easing: "swing"
    });
});
});

HTML: //index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div class="image"></div>
</body>
</html>

CSS: //stylesheet.css

body
{
background-image: url("background.jpg");
margin:0 auto;
padding:0;
}
.image
{
background-color: green;
width: 100px;
height: 100px; 
}

Nothing happens with the div, but if I try it with css() it works! How can I fix this? Everything gets called correctly, even some stuff after animate() (I added an alert() to check lol) so I have no clue why...

After including them it seems to doesn't work either. – NaCl Feb 10 '14 at 23:24 — NaCl, Feb 10 '14 at 23:24

score 1 · Accepted Answer · answered Feb 10 '14 at 23:26

From the official jQuery documentation:

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). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

http://api.jquery.com/animate/

I'd suggest using CSS3 transitions to achieve the same effect. jsFiddle example here.

.image {
    background-color: green;
    width: 100px;
    height: 100px; 
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

For transition easing you can check out this link.

JQuery animate() doesnt work with my usage while css() works fine

1 Answers1