title: how to smoothly animate a loop in jquery
body: <p>I don't know, how to smoothly loop animation. </p>
  
  <p>At the moment, the animation goes smoothly to end of selector (<code>#horizontalSlider ul</code>) and the next animation starts from the begin of selector(<code>#horizontalSlider ul</code>). </p>
  
  <p>How to get effect like kind duplicated to endless selector(<code>#horizontalSlider ul</code>).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/pauseAnimation.js"&gt;&lt;/script&gt;
  &lt;style&gt;
      /*ALL DIV WRAPPER;*/
  
      html {
          margin: 0 auto;
          padding: 0;
      }
  
      #horizontalSlider {
          position: relative;
          overflow: hidden;
          width: 400px;
      }
  
      #horizontalSlider ul {
          position: relative;
          height: 180px;
          list-style: none;
          overflow: hidden;
          /*width: 1800px;*/
      }
  
      .left {
          float: left;
      }
  
      #horizontalSlider ul li {
         position: relative;
          display: block;
          float: left;
          /*width: 200px;*/
          /*border: 1px solid gold;*/
          opacity: 0.3;
          transition: opacity 1s;
          -webkit-transition: opacity 1s;
      }
  
      #horizontalSlider ul li:hover {
          opacity: 1.0;
          /*filter: alpha(opacity=1);*/  
          transition: opacity 1s;
          -webkit-transition: opacity 1s;
      }
  
      .all {
          margin: 0 auto;
          width: 550px;
      }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  var totalWidth = 0;
  var numerOfChildlenElements = 0;
  
      function moveRight() {
          $('#horizontalSlider ul').css({right:0});
  
          $('#horizontalSlider ul').animate({right: totalWidth}, 15000, function () {
                moveRight();
          });
      }
  
      $(document).ready(function() {
          numerOfChildlenElements = $("ul").children().length;
          for(i = 0; i &lt; numerOfChildlenElements; ++i)
              totalWidth += $("ul").children().eq(i).width();
          $('#horizontalSlider ul').css("width", totalWidth);
  
          $("#left").click(function(e){
              e.preventDefault();
  
          });
  
          $("#right").click(function(e){
              e.preventDefault();
          });
  
      moveRight();
  
  
  
          $('#horizontalSlider ul li').hover(function() {
            $('#horizontalSlider ul').pause();
          }, function() {
            $('#horizontalSlider ul').resume();
          });
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="all"&gt;
          &lt;button id="left" class="left"&gt;LEFT&lt;/button&gt;
          &lt;div id="horizontalSlider" class="left"&gt;
          &lt;ul&gt;
                  &lt;li&gt;
                       &lt;div&gt;&lt;img src="http://th02.deviantart.net/fs71/150/f/2011/178/9/3/06272011___naruto_x_tayuya_by_dthegrimm-d3k6edx.jpg" alt="zdj1" /&gt;&lt;/div&gt;
                       &lt;div&gt;Praesent at vestibulum sapien&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div&gt;&lt;img src="http://th01.deviantart.net/fs44/150/f/2009/068/6/3/new_naruto_7_class_by_unhai.jpg" alt="zdj2" /&gt;&lt;/div&gt;
                      &lt;div&gt;Nullam ut varius ante.&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div&gt;&lt;img src="http://www.creetor.com/games/images/naruto-ninja-world-storm-2.png" alt="zdj3" /&gt;&lt;/div&gt;
                      &lt;div&gt;P3t at vestibulum sapien,&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div&gt;&lt;img src="http://th06.deviantart.net/fs70/150/i/2012/352/0/6/naruto_uzumaki_vs_son_goku_by_pinkycute03-d5oej1r.jpg" alt="zdj4" /&gt;&lt;/div&gt;
                      &lt;div&gt;Orange akcesoria still&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;button id="right" class="right"&gt;RIGHT&lt;/button&gt;
      &lt;/div&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/xp1Lbhza/5/" rel="nofollow">JSFIDDLE DEMO</a></p>