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。