Animating path coordinate changes in Raphael

Question

Background: I'm using Raphael to create an animated border effect for a series of <li>s with child <a> elements. The concept is that before hover, a block <li> element will have 4 90-degree corner borders (see fig. 1). Then on hover, each corner border will extend one of its arms to meet the next, creating a full border around the element (see fig.2).

Progress: I've achieved the corner borders effect (the look before hover) using a Raphael canvas positioned absolutely beneath the child <a> element.

Problem: I'm unsure how to animate one end of an existing path to a new coordinate. SO has various questions about animating paths, but none seem to address how to animate one end of a simple path to a new coordinate - is there a straightforward way to do this I've overlooked in the Raphael docs? I've tried placing coordinates inside the animation handler but it's had no effect. Here's a jsfiddle, and here's my JS so far (with a stroke color change to make sure I have the hover function right):

//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);
});

Answer 1

You can just enter a new 'path' attribute to animate to. So just amend the end points...so the hover func would be changed like this.

working 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);
});