为什么我只有一个拉斐尔.JS圆圈正在制作动画

Question

在我的HTML文档中，我有两个div：

  <div id="raphael"></div>
  <div id="raphael1"></div>

我正在使用拉斐尔动画2个圆，但只有1个是正确的动画。另一个设置从leftCircle到rightCircle的动画，但停止。

为什么第二个圆（拉斐尔1）没有正确地设置动画？

$(document).ready(function() {
    circleRight = function() {
        newCircle = {
            'transform' : 't100,0'
        }
        circ.animate(newCircle, 1000, 'linear', circleLeft)
    }
    circleLeft = function() {
        newCircle = {
            'transform' : 't0,0'
        }
        circ.animate(newCircle, 1000, 'linear', circleRight)
    }
    setup = function() {
        paper = Raphael('raphael', 320, 320)
        circ = paper.circle(100, 50, 30)
        circleRight()
    }
    //circle 2
    circleRight1 = function() {
        newCircle1 = {
            'transform' : 't100,0'
        }
        circ.animate(newCircle1, 1000, 'linear', circleLeft1)
    }
    circleLeft1 = function() {
        newCircle1 = {
            'transform' : 't0,0'
        }
        circ.animate(newCircle1, 1000, 'linear', circleRight1)
    }
    setup1 = function() {
        paper = Raphael('raphael1', 320, 320)
        circ = paper.circle(100, 50, 30)
        circleRight1()
    }
    $(document).ready(setup)
    $(document).ready(setup1)
})

Answer 1

您的代码中有太多的JavaScript误用。给您带来错误的最直接的原因是您不尊重变量范围。

在JS中，如果使用var声明变量，则它们具有函数作用域，否则它们具有全局（无论全局对象是什么）作用域

这是固定代码。工作JSFiddle

'use strict';
$(document).ready(function () {
    var circleRight = function (circ) {
        var newCircle = {
            'transform': 't100,0'
        };
        circ.animate(newCircle, 1000, 'linear', function () {
            circleLeft(circ);
        });
    };
    var circleLeft = function (circ) {
        var newCircle = {
            'transform': 't0,0'
        };
        circ.animate(newCircle, 1000, 'linear', function () {
            circleRight(circ);
        });
    };
    var setup = function () {
        var paper = new Raphael('raphael', 320, 320);
        var circ = paper.circle(100, 50, 30);
        circleRight(circ);
    };
    //circle 2
    var circleRight1 = function (circ) {
        var newCircle1 = {
            'transform': 't100,0'
        };
        circ.animate(newCircle1, 1000, 'linear', function () {
            circleLeft1(circ);
        });
    };
    var circleLeft1 = function (circ) {
        var newCircle1 = {
            'transform': 't0,0'
        };
        circ.animate(newCircle1, 1000, 'linear', function () {
            circleRight1(circ);
        });
    };
    var setup1 = function () {
        var paper = new Raphael('raphael1', 320, 320);
        var circ = paper.circle(100, 50, 30);
        circleRight1(circ);
    };
    setup();
    setup1();
});

这里有一些链接可以更好地理解JavaScript。

• JavaScript：好的部分
• Douglas Crockford关于JavaScript的讲座
• JavaScript上的Crockford（自大爆炸以来）
• http://www.jslint.com/（不适合胆小的人）