Jquery animation property not working on my prefered CSS style

Question

I am making a small video game where I want the avatar picture glow red as if taking damage from a npc. To do this effect i'm trying to animate a red shadowBox over my player, but its not working. Can someone help me figure out what i'm dong wrong in particular? I tried using .css but that does not animate it. It only changes it right away.

$(document).ready(function() {
    $('#usercontainer').click(function() {
        $(this).animate({
        boxShadow: '10px 10px 10px red'
        },'slow');
    });
});

Extra CSS + HTML

#usercontainer {
        float: left;
        border: 1px solid;
        background-color: rgb(255,255,255);
        height: 200px;
        width: 200px;
        overflow: hidden;
        }

        #userimage {
            background-color: rgb(0,255,255);
            height: 200px;
            width: 200px;
            }



<div id="usercontainer">
    <div id="userimage">
        <img src="images/wingedwarrior.jpg" alt="warrior" style="width:200px; height:200px">
            <div id="userHitSplat"> </div>
    </div> <!--END OF USER IMAGE-->
</div><!--END OF USER CONTAINER-->

Answer 1

This is probably easier with css animations:

#usercontainer {
        float: left;
        border: 1px solid;
        background-color: rgb(255,255,255);
        height: 200px;
        width: 200px;
        overflow: hidden;
        transition: 1s;
        }
#usercontainer.glow {
        box-shadow: 10px 10px 10px red;
}

        #userimage {
            background-color: rgb(0,255,255);
            height: 200px;
            width: 200px;
            }

And then to animate:

$(document).ready(function() {
    $('#usercontainer').click(function() {
        $(this).addClass('glow');
    });
});

The reason the js animation doesn't work is that jquery can't animate colors. Jquery-ui includes the ability to do this, but it's probably not woth it for this when you can use css animations instead.

Demo