title: Flying balloon animation
body: <p>I've made a simple animation of a balloon moving from bottom to top. First loop works fine and then it starts some random motion. i.e. I want balloons to come one after the other from bottom to top without any randomness. And repeat.</p>
  
  <pre><code>&lt;div id="parent"&gt;
      &lt;div class="message"&gt;1. Bob&lt;/div&gt;
      &lt;div class="message"&gt;2. Alice&lt;/div&gt;
      &lt;div class="message"&gt;3. Eve&lt;/div&gt;
  &lt;/div&gt;
  
  
  jQuery.fn.verticalMarquee = function(vertSpeed, horiSpeed, index) {
  
      this.css('float', 'left');
  
      vertSpeed = vertSpeed || 1;
      horiSpeed = 1/horiSpeed || 1;
  
      var windowH = this.parent().height(),
          thisH = this.height(),
          parentW = (this.parent().width() - this.width()) / 2,
          rand = Math.random() * (index * 1000),
          current = this;
  
      this.css('margin-top', windowH + thisH);
      this.parent().css('overflow', 'hidden');
  
      setInterval(function() {
          current.css({
              marginTop: function(n, v) {
                  return parseFloat(v) - vertSpeed;
              },
              marginLeft: function(n, v) {
                  //return (Math.sin(new Date().getTime() / (horiSpeed * 5000) + 1000) + 1) * parentW;
                  return (Math.pow(new Date().getTime() / ( 5000) + 1000) + 1);
              }
          });
      }, 15);
  
      setInterval(function() {
          if (parseFloat(current.css('margin-top')) &lt; -thisH) {
              current.css('margin-top', windowH + thisH);
          }
      }, 250);
  };
  var message = 1;
  $('.message').each(function(message) {  
      $(this).verticalMarquee(0.5, 0.5, message);
      message++
  });
  
  parent {
  
      left: 0;
      top: 0;
      width: 400px;
      height: 100%;
  }
  
  .message,.message-1 {
      height: 120px;
      width: 120px;
      background-color: orange;
      color: white;
      z-index: -9999;
      line-height: 115px;
      text-align: center;
      font-family: Arial, sans-serif;
      font-weight: bold;
  
      -webkit-border-radius: 60px;
      -moz-border-radius: 60px;
      border-radius: 60px;
  }
  </code></pre>
  
  <p>Fiddle: <a href="https://jsfiddle.net/znrhkf3c/12/" rel="noreferrer">https://jsfiddle.net/znrhkf3c/12/</a> </p>
  
  <p>Any help here is really appreciated. </p>