title: jQuery Issue on Animate Border Until Selected Element by sequent
body: <p>Can you please take a look at this demo and let me know how I can add animation to borders properly so when use clicks on <code>a</code> the all previous borders get the <code>anime100</code> class after each other in a sequence</p>
  
  <p>what is happening now is adding the <code>anime100</code> to all anime classes at the same time!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("a:eq( 1 )").on("click", function() {
    $('.anime:eq( 0 )').addClass('anime100');
  });
  
  $("a:eq( 2 )").on("click", function() {
    $('.anime:eq( 0 )').addClass('anime100');
    $('.anime:eq( 1 )').addClass('anime100');
  });
  
  $("a:eq( 3 )").on("click", function() {
    $('.anime:eq( 0 )').addClass('anime100');
    $('.anime:eq( 1 )').addClass('anime100');
    $('.anime:eq( 2 )').addClass('anime100');
  });
  
  $("a:eq( 4 )").on("click", function() {
    $('.anime:eq( 0 )').addClass('anime100');
    $('.anime:eq( 1 )').addClass('anime100');
    $('.anime:eq( 2 )').addClass('anime100');
    $('.anime:eq( 3 )').addClass('anime100');
  });
  
  $("a:eq( 5 )").on("click", function() {
    $('.anime:eq( 0 )').addClass('anime100');
    $('.anime:eq( 1 )').addClass('anime100');
    $('.anime:eq( 2 )').addClass('anime100');
    $('.anime:eq( 3 )').addClass('anime100');
    $('.anime:eq( 4 )').addClass('anime100');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.anime {
    height: 10px;
    width: 0px;
    background: gold;
    transition: all 0.7s;
  }
  
  .anime100 {
    width: 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul class=""&gt;
    &lt;li&gt;
      &lt;div class="box"&gt;
        &lt;div class="left"&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/div&gt;
        &lt;div class="anime"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="box"&gt;
        &lt;div class="left"&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/div&gt;
        &lt;div class="anime"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="box"&gt;
        &lt;div class="left"&gt;&lt;a href="#"&gt;C&lt;/a&gt;&lt;/div&gt;
        &lt;div class="anime"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="box"&gt;
        &lt;div class="left"&gt;&lt;a href="#"&gt;D&lt;/a&gt;&lt;/div&gt;
        &lt;div class="anime"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="box"&gt;
        &lt;div class="left"&gt;&lt;a href="#"&gt;E&lt;/a&gt;&lt;/div&gt;
        &lt;div class="anime"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="box"&gt;
        &lt;div class="left"&gt;&lt;a href="#"&gt;F&lt;/a&gt;&lt;/div&gt;
        &lt;div class="anime"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>