Рафаэль: Триггер анимации нескольких путей индивидуально

Question

У меня есть проект с использованием Рафаэля для рисования и анимирования дорожек. Проект предназначен для того, чтобы иметь несколько div с похожими путями, с анимациями, которые запускаются при наведении курсора мыши. На данный момент divs заполняются правильно, но анимация происходит только в последнем созданном div. Как заставить скрипт различать divs для их анимирования отдельно?

Пример 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

Интересно, сколько головной боли Javascript с losures вызвали ... возможно, довольно много :) Ваш код в порядке, вам просто нужно переместить внутреннюю часть цикла 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.