title: Looping through previous and next LIs starting from the current one hovered
body: <p>I am currently playing around with a <a href="http://codepen.io/Leprince/pen/ZpQaNE" rel="nofollow">menu animation</a>. I achieved the desired result but it's not optimised and I can't manage to create a function to loop through the elements and apply the correct effect.</p>
  
  <p>What I am basically doing is going through all LI after and before the LI hovered and reducing/fading the elements based on their positions. So the further the LI is from the hovered one the smaller and transparent it gets. </p>
  
  <p>My solution is obviously not flexible as I need to run through all the values again if I add/remove a LI.</p>
  
  <p>I would be interested to know how you would simplify that.</p>
  
  <p>The code is quite simple.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $("ul li").on("mouseover", function(){
      $("ul li").removeClass("current");
      var liLength = $("ul li").length;
      $(this).css({
          "width": "42",
          "opacity": "1"
        }).prevAll().eq(0).css({
          "width": "35",
          "opacity": "0.8333333334"
        }).prevAll().eq(0).css({
          "width": "28",
          "opacity": "0.6666666667"           
        }).prevAll().eq(0).css({
          "width": "21",
          "opacity": "0.5"
       }).prevAll().eq(0).css({
          "width": "14",
          "opacity": "0.3333333333"
        }).prevAll().eq(0).css({
          "width": "7",
          "opacity": "0.16666666667"
        });
  
      $(this).css({
          "width": "42",
          "opacity": "1"
        }).nextAll().eq(0).css({
          "width": "35",
          "opacity": "0.8333333334"
        }).nextAll().eq(0).css({
          "width": "28",
          "opacity": "0.6666666667"           
        }).nextAll().eq(0).css({
          "width": "21",
          "opacity": "0.5"
       }).nextAll().eq(0).css({
          "width": "14",
          "opacity": "0.3333333333"
        }).nextAll().eq(0).css({
          "width": "7",
          "opacity": "0.16666666667"
        });
  
    $("ul li").on("mouseout", function(){
      $("ul li").removeClass("current").css({
        "width": "21",
        "opacity": "1"
      });
    });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body, ul{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  
  .container{
    height: 100%;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center; 
  }
  
  ul{
   display: block;
   position: relative;
   height: auto;
  }
  
  ul li{
   list-style:none;
   background: #232323;
   border-top: 10px solid #fff;
   border-bottom: 10px solid #fff;
   border-right: 10px solid #fff;
   height: 10px;
   width: 21px;
   translate3d(0,0,0);
   -webkit-transition: all 200ms linear;
   transition:all 200ms linear;
  }
  
  ul li.current{
   background: blue;
  }
  
  .exp{
   position: fixed;
   top: 0;
   right: 0;
   background: grey;
   width: 20px;
  }</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;div class="container"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The key elements :</p>
  
  <p>The bigger element should be 42px wide and opacity : 1
  The smaller element should be 7px wide and opacity : 0.2</p>
  
  <p>The size should decrease as follow : (42 - 7) / x-elements * index of the element compared to its position from the hovered element.</p>
  
  <p>The opacity should decrease as follow : (1 - 0.2) / x-elements * index of the element compared to its position from the hovered element.</p>
  
  <p>The Prototype : <a href="http://codepen.io/Leprince/pen/ZpQaNE" rel="nofollow">Codepen</a></p>
  
  <p>Thanks a lot!</p>