Javascript 拉斐尔：单独触发多路径动画

我有一个项目使用拉斐尔绘制和动画路径。该项目旨在拥有多个具有类似路径的div，并在鼠标悬停时触发动画。目前，div正在正确填充，但动画仅在创建的最后一个div中发生。如何使脚本区分div以分别设置它们的动画

HTML示例：

<div id="box" class="con1"></div>
<div id="box" class="con2"></div>

示例JS：

var divs = document.getElementsByTagName("div");

function init() {
    for(var i = 0; i < divs.length; i++){
        var box = divs[i];
        var boxheight = box.offsetHeight;
        var boxWidth = box.offsetWidth;
        var paper = Raphael(box,boxWidth,boxheight);
        var path1 = paper.path("M20,10 l25,0").attr({'stroke-width': 2,stroke:"#FF0000"});
        var path2 = paper.path("M21,10 l-25,0").attr({'stroke-width': 2,stroke:"#FF0000"});

        box.addEventListener("mouseover", function() {
            paper.setStart();
            path1.animate({path:"M20,10 l5,5 l5,-5 l5,5"}, 200); 
            path2.animate({path:"M21,10 l-5,5 l-5,-5 l-5,5"}, 200); 
            cat = paper.setFinish();
        });
        box.addEventListener("mouseout", function() {
            paper.setStart();
            path1.animate({path:"M20,10 l25,0"}, 200);
            path2.animate({path:"M21,10 l-25,0"}, 200); 
            cat = paper.setFinish();
        });
     }
}

init();

---

我想知道Javascript闭包造成了多少麻烦。。。可能有很多：代码很好，只需将for循环的内部移动到一个单独的函数中即可创建新的作用域，因为在Javascript中，闭包是在函数级别而不是块级别创建的

for(var i = 0; i<divs.length; i++){
  createDiv(i);
}

function createDiv(i){
  var box = divs[i];
  ...
}

查看一个工作示例

如果您想阅读更多关于闭包的内容，我建议您，例如，或者可能

for(var i = 0; i<divs.length; i++){
  createDiv(i);
}

function createDiv(i){
  var box = divs[i];
  ...
}