javascript - 从当前悬停开始循环遍历上一个和下一个 LI

Question

我目前正在玩一个 menu animation .我达到了预期的结果，但它没有得到优化，我无法设法创建一个函数来遍历元素并应用正确的效果。

我基本上做的是在 LI 悬停之后和之前遍历所有 LI，并根据元素的位置减少/淡化元素。因此，LI 离悬停的越远，它就会变得越小和透明。

我的解决方案显然不灵活，因为如果我添加/删除 LI，我需要再次遍历所有值。

我很想知道您将如何简化它。

代码很简单。

$(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"
    });
  });
  });
});

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

关键要素:

较大的元素应为 42px 宽且不透明度:1较小的元素应该是 7px 宽和不透明度:0.2

大小应减少如下:(42 - 7)/x-elements * 元素的索引与其在悬停元素中的位置相比。

不透明度应按以下方式降低:(1 - 0.2)/x-elements * 元素的索引与其在悬停元素中的位置相比。

原型(prototype):Codepen

非常感谢!

Answer 1

您可以遍历每个元素集合并使用 index 作为指示符；尝试这样的事情:

$(this).css({"width": "42","opacity":"1"})
       .prevAll().each(function(index){
           $(this).css({
              "width": ((42-7)/(index+1))+"px",
               "opacity": ((1-0.2)/(index+1))
            })
       })

Codepen Demo