Javascript 使用jQuery在鼠标上方进行Svg颜色转换？

我的html中有一个“svg”标记，这是一个soundcloud图标。我希望soundcloud图标在鼠标上方转换颜色，就像我在CSS中使用“transition”属性一样。你可以看看下面链接中soundcloud图标两侧的twitter引导图标，看看我的意思

我尝试过这个，但运气不好：

$(".soundcloud")
.mouseenter(function() {
var color = "#ff7700";
$(this).animate({children().css('fill',color); 
}, 1000) })
.mouseleave(function() {
$(this).animate({children().css('fill','#FAFAFA');
}, 1000)});
});

该网站位于以下位置：

此脚本的版本位于结束正文标记之前

---

我是怎么开始做这样的工作的

> P> >如果您考虑使用CSS3，请查看Adobe的这篇博客文章，关于SVGS

动画

---

基本上只是在hover上应用动画类，然后是一些我以前遇到过的文章。问题是当我将鼠标悬停在图标上时，颜色会变为紫色，但不会保持紫色。只要鼠标停留在图标上，我如何使图标颜色保持紫色？尝试使用jquery的on函数$（“button”）.on（“mouseover”，function（）{$（“div”）.animate（{left:'250px'}）；}）；