Raphael：单独触发多个路径动画

Question

我有一个项目使用Raphael绘制和动画路径。该项目旨在具有多个具有相似路径的div，并具有在鼠标悬停时触发的动画。目前，divs正常填充，但动画只发生在最后创建的div上。我该如何让脚本区分不同的div来动画它们？

示例HTML：

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

范例CSS：

#box { 
    width: 100px; 
    height: 50px; 
    float: left; 
} 
.con1 { 
    background-color:#6634FD; 
} 
.con2 { 
    background-color:#2BA18D; 
} 

例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(); 

http://fiddle.jshell.net/BlueInkAlchemist/dneyhvm1/10/

Answer 1

我不知道有多少头痛C写的JavaScript失败已经造成......可能不止一个:)你的代码很好，你只需要将for循环的内部移动到一个单独的函数中来创建一个新的范围，因为在Javascript中，闭包是在函数级别创建的，而不是块级别。

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

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

查看this forked fiddle查看实例。

如果您想了解更多关于闭包的信息，我建议this question或可能的this one。