动画路径协调拉斐尔变化(Animating path coordinate changes in R

背景：我使用的是拉斐尔创造了一系列的动画边框效果<li>与孩子的<a>元素。这个概念是，悬停之前，块<li>元件将具有4的90度角的边界（参见图1）。然后悬停，每个角落边界将扩大其双臂，迎接接下来的一个，创建元件的周围的完整的边框（见图2）。

进展：我已经取得了使用绝对定位的子下方的拉斐尔画布一角的边界效应（悬停前的样子） <a>元素。

问题：我不能确定如何动画现有路径的一端到一个新的坐标。 SO大约有动画路径的各种问题，但似乎没有解决如何将简单的路径的一端到动画一个新的坐标 - 有一个简单的方法来做到这一点，我在拉斐尔文档忽略了？我试过把坐标动画处理程序中，但它没有任何效果。这里有一个的jsfiddle ，这是我的JS到目前为止（用笔触颜色变化，以确保我有合适的悬停功能）：

//path coords before anim
var paper = Raphael(document.getElementById("blog"), 142, 46);
var btmleftcorner = paper.path("M0 36L0 46L10 46");
var btmrightcorner = paper.path("M132 46L142 46L142 36");
var toprightcorner = paper.path("M142 10L142 0L132 0");
var topleftcorner = paper.path("M10 0L0 0L0 10");
//path attrs
btmleftcorner.attr({"stroke-width": "2"})
btmrightcorner.attr({"stroke-width": "2"})
toprightcorner.attr({"stroke-width": "2"})
topleftcorner.attr({"stroke-width": "2"})
//path attrs after anim
$("#blog").hover(function () {
    btmleftcorner.animate({"stroke": "red"}, 300);
    btmrightcorner.animate({"stroke": "red"}, 300);
    toprightcorner.animate({"stroke": "red"}, 300);
    topleftcorner.animate({"stroke": "red"}, 300);
}, function() {
    btmleftcorner.animate({"stroke": "black"}, 300);
    btmrightcorner.animate({"stroke": "black"}, 300);
    toprightcorner.animate({"stroke": "black"}, 300);
    topleftcorner.animate({"stroke": "black"}, 300);
});

你可以只输入一个新的“路径”属性的动画来。因此，只要修改终点......所以悬停FUNC就这样被改变。

工作的jsfiddle

$("#blog").hover(function () {
    btmleftcorner.animate({"stroke": "red", path: "M0 36L0 46L146 46" }, 300);
    btmrightcorner.animate({"stroke": "red", path: "M132 46L142 46L142 0"}, 300);
    toprightcorner.animate({"stroke": "red", path: "M142 10L142 0L132 0 0 0"}, 300);
    topleftcorner.animate({"stroke": "red", path: "M10 0L0 0L0 46"}, 300);
}, function() {
    btmleftcorner.animate({"stroke": "black", path: "M0 36L0 46L10 46"}, 300);
    btmrightcorner.animate({"stroke": "black", path: "M132 46L142 46L142 36"}, 300);
    toprightcorner.animate({"stroke": "black", path: "M142 10L142 0L132 0"}, 300);
    topleftcorner.animate({"stroke": "black", path: "M10 0L0 0L0 10"}, 300);
});