Question

我有一个项目使用Raphael绘制和动画路径。该项目旨在使多个div具有相似的路径，并在鼠标悬停时触发动画。目前，div正确填充，但动画只发生在最后创建的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

我想知道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。

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

1 个答案: