Javascript Jquery动画属性不适用于我喜欢的CSS样式

我正在制作一个小的视频游戏，我希望阿凡达的图片发出红色的光芒，就像受到npc的伤害一样。为了达到这个效果，我尝试在我的播放器上设置一个红色阴影盒的动画，但它不起作用。有人能帮我弄清楚我到底错了什么吗？我尝试过使用.css，但它并没有动画效果。它只会马上改变它

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

额外的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-->

---

使用css动画可能更容易做到这一点：

#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;
            }

然后设置动画：

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

js动画不起作用的原因是jquery无法为颜色设置动画。jQueryUI包含了这样做的功能，但是当您可以使用css动画时，它可能不适合这样做

---

你会考虑使用jQuery UI高亮效果吗？