Animate Border Until Selected Element Sequenty

Animate Border Until Selected Element Sequenty

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 `a` the all previous borders get the `anime100` class after each other in a sequence

what is happening now is adding the `anime100` to all anime classes at the same time?


  1.  <ul class="">
  2.       <li>
  3.          <div class="box">
  4.             <div class="left"><a href="#">A</a></div>
  5.            <div class="anime"></div>
  6.          </div>
  7.  
  8.       </li>
  9.       <li>
  10.          <div class="box">
  11.             <div class="left"><a  href="#">B</a></div>
  12.                       <div class="anime"></div>
  13.          </div>
  14.       </li>
  15.       <li>
  16.          <div class="box">
  17.             <div class="left"><a  href="#">C</a></div>
  18.                       <div class="anime"></div>
  19.          </div>
  20.       </li>
  21.       <li>
  22.          <div class="box">
  23.             <div class="left"><a  href="#">D</a></div>
  24.                       <div class="anime"></div>
  25.          </div>
  26.       </li>
  27.        <li>
  28.          <div class="box">
  29.             <div class="left"><a  href="#">E</a></div>
  30.                       <div class="anime"></div>
  31.          </div>
  32.       </li>     
  33.       <li>
  34.          <div class="box">
  35.             <div class="left"><a  href="#">F</a></div>
  36.                       <div class="anime"></div>
  37.          </div>
  38.       </li>     


  1. .anime{
  2.   height:10px;
  3.   width:0px;
  4.   background:gold;
  5.   transition: all 0.7s;
  6. }
  7. .anime100{
  8.   width:250px;
  9. }

  1.  $("a:eq( 1 )").on("click", function() {
  2.   $('.anime:eq( 0 )').addClass('anime100');
  3. });

  5. $("a:eq( 2 )").on("click", function() {
  6.   $('.anime:eq( 0 )').addClass('anime100');
  7.   $('.anime:eq( 1 )').addClass('anime100');
  8. });

  10. $("a:eq( 3 )").on("click", function() {
  11.   $('.anime:eq( 0 )').addClass('anime100');
  12.   $('.anime:eq( 1 )').addClass('anime100');
  13.   $('.anime:eq( 2 )').addClass('anime100');
  14. });

  16. $("a:eq( 4 )").on("click", function() {
  17.   $('.anime:eq( 0 )').addClass('anime100');
  18.   $('.anime:eq( 1 )').addClass('anime100');
  19.   $('.anime:eq( 2 )').addClass('anime100');
  20.   $('.anime:eq( 3 )').addClass('anime100');
  21. });

  23. $("a:eq( 5 )").on("click", function() {
  24.   $('.anime:eq( 0 )').addClass('anime100');
  25.   $('.anime:eq( 1 )').addClass('anime100');
  26.   $('.anime:eq( 2 )').addClass('anime100');
  27.   $('.anime:eq( 3 )').addClass('anime100');
  28.   $('.anime:eq( 4 )').addClass('anime100');
  29. });