Question

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

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

我使用raphael动画2个圆圈，但只有1个正常动画。其他动画从leftCircle到rightCircle但停止。

为什么第二个圆圈（raphael1）没有正确动画？

$(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声明，则具有功能范围，否则它们具有全局（无论是否为全局对象）范围。

这里是固定代码。 Working 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: The Good Parts
Douglas Crockford lectures on JavaScript
Crockford on JavaScript（自大爆炸以来）
http://www.jslint.com/（不适合胆小的人）

为什么我的raphael.JS圈中只有一个是动画的？

1 个答案: