Почему мои только 1 из моих кругов raphael.JS оживляют?

Question

В моем HTML документах, у меня есть 2 дивы:

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

Я использую Рафаил анимировать 2 круга, но только 1 оживляет правильно. Другой анимирует из leftCircle вправоCircle, но останавливается.

Почему второй круг (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/ (не для слабонервных)