title: each(function()) with three types of elements with random parameters doesn't work
body: <p>I have a problem.</p>
  
  <p>I have three types of objects (stars). Every object type has the same class name. Objects with the same classes are in different containers. Objects from these containers with the same index are in the same positions and animating in the same directions.</p>
  
  <p>Objects shows in random places and animating (scaling) from center of page outside the screen. Effect is like you're flying through the stars.</p>
  
  <p>Every time each stars shows, it have to be in random place, because animation have to match the screen size dynamically (for example if someone wants resize broser window).</p>
  
  <p>And everything going great, first animation of every star is correct, but the second time (and every next time), stars with same index are moving in different directions. Starting position of stars is correct every time. Every three type of stars with same index, are showing in the same place. But moving in different.</p>
  
  <p>I don't know why.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>    $(window).load(function() {
          $('.starSharp:eq(0), .starBlur:eq(0), .starDark:eq(0)').css({background: "#FF0000"});
          $('.starSharp').each(function(i) {
              var delayFly = Math.ceil(Math.random() * 9000);
              function fly() {
                  var screenW = window.innerWidth;
                  var screenH = window.innerHeight;
                  var randomX = Math.ceil(Math.random() * (screenW * 3));
                  var randomY = Math.ceil(Math.random() * (screenH * 3));
                  var endX = (randomX - (screenW * 1.5) - 60);
                  var endY = (randomY - (screenH + 275) - 60);
                  $(this).add('.starBlur:eq(' + i + '), .starDark:eq(' + i + ')').css({
                      left: 1280 + (endX * 0.2) + "px",
                      right: 1280 - ((endX + 120) * 0.2) + "px",
                      top: 275 + (endY * 0.2) + "px",
                      bottom: 175 - ((endY + 120) * 0.2) + "px"
                  });
                  $(this).add('.starBlur:eq(' + i + '), .starDark:eq(' + i + ')').delay(delayFly).animate({
                      left: 1280 + endX + "px",
                      right: 1280 - (endX + 120) + "px",
                      top: 275 + endY + "px",
                      bottom: 175 - (endY + 120) + "px"
                  }, 9000, "easeInCirc", function() {
                      fly.call(this);
                  });
              }
              fly.call(this);
              var delayFly = 0;
          });
      });
  </code></pre>
  
  <p>And here's my html:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="contentFrame"&gt;
          &lt;div id="spaceBlur"&gt;
              &lt;div class="starBlur" data-picture data-alt=""&gt;
                  &lt;div data-src="layout/72/starBlur.png"&gt;&lt;/div&gt;
                  &lt;div data-src="layout/144/starBlur.png" data-media="(-webkit-min-device-pixel-ratio: 2.0)"&gt;&lt;/div&gt;
                  &lt;noscript&gt;&lt;img src="layout/72/starBlur.png" alt="" /&gt;&lt;/noscript&gt;
              &lt;/div&gt;
              &lt;div class="starBlur" data-picture data-alt=""&gt;
                  &lt;div data-src="layout/72/starBlur.png"&gt;&lt;/div&gt;
                  &lt;div data-src="layout/144/starBlur.png" data-media="(-webkit-min-device-pixel-ratio: 2.0)"&gt;&lt;/div&gt;
                  &lt;noscript&gt;&lt;img src="layout/72/starBlur.png" alt="" /&gt;&lt;/noscript&gt;
              &lt;/div&gt;
              &lt;div class="starBlur" data-picture data-alt=""&gt;
                  &lt;div data-src="layout/72/starBlur.png"&gt;&lt;/div&gt;
                  &lt;div data-src="layout/144/starBlur.png" data-media="(-webkit-min-device-pixel-ratio: 2.0)"&gt;&lt;/div&gt;
                  &lt;noscript&gt;&lt;img src="layout/72/starBlur.png" alt="" /&gt;&lt;/noscript&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="menuFrame"&gt;
          &lt;div id="spaceDark"&gt;
              &lt;div class="starDark" data-picture data-alt=""&gt;
                  &lt;div data-src="layout/72/starBlur.png"&gt;&lt;/div&gt;
                  &lt;div data-src="layout/144/starBlur.png" data-media="(-webkit-min-device-pixel-ratio: 2.0)"&gt;&lt;/div&gt;
                  &lt;noscript&gt;&lt;img src="layout/72/starBlur.png" alt="" /&gt;&lt;/noscript&gt;
              &lt;/div&gt;
              &lt;div class="starDark" data-picture data-alt=""&gt;
                  &lt;div data-src="layout/72/starBlur.png"&gt;&lt;/div&gt;
                  &lt;div data-src="layout/144/starBlur.png" data-media="(-webkit-min-device-pixel-ratio: 2.0)"&gt;&lt;/div&gt;
                  &lt;noscript&gt;&lt;img src="layout/72/starBlur.png" alt="" /&gt;&lt;/noscript&gt;
              &lt;/div&gt;
              &lt;div class="starDark" data-picture data-alt=""&gt;
                  &lt;div data-src="layout/72/starBlur.png"&gt;&lt;/div&gt;
                  &lt;div data-src="layout/144/starBlur.png" data-media="(-webkit-min-device-pixel-ratio: 2.0)"&gt;&lt;/div&gt;
                  &lt;noscript&gt;&lt;img src="layout/72/starBlur.png" alt="" /&gt;&lt;/noscript&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="topFrame"&gt;
          &lt;div id="spaceSharp"&gt;
              &lt;div class="starSharp" data-picture data-alt=""&gt;
                  &lt;div data-src="layout/72/starSharp.png"&gt;&lt;/div&gt;
                  &lt;div data-src="layout/144/starSharp.png" data-media="(-webkit-min-device-pixel-ratio: 2.0)"&gt;&lt;/div&gt;
                  &lt;noscript&gt;&lt;img src="layout/72/starSharp.png" alt="" /&gt;&lt;/noscript&gt;
              &lt;/div&gt;
              &lt;div class="starSharp" data-picture data-alt=""&gt;
                  &lt;div data-src="layout/72/starSharp.png"&gt;&lt;/div&gt;
                  &lt;div data-src="layout/144/starSharp.png" data-media="(-webkit-min-device-pixel-ratio: 2.0)"&gt;&lt;/div&gt;
                  &lt;noscript&gt;&lt;img src="layout/72/starSharp.png" alt="" /&gt;&lt;/noscript&gt;
              &lt;/div&gt;
              &lt;div class="starSharp" data-picture data-alt=""&gt;
                  &lt;div data-src="layout/72/starSharp.png"&gt;&lt;/div&gt;
                  &lt;div data-src="layout/144/starSharp.png" data-media="(-webkit-min-device-pixel-ratio: 2.0)"&gt;&lt;/div&gt;
                  &lt;noscript&gt;&lt;img src="layout/72/starSharp.png" alt="" /&gt;&lt;/noscript&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Help, please.</p>