javascript - 用于 mouseenter 和 mouseleave 效果的 JQuery 函数 - 包含不同 id 和类名的 HTML - 反馈请求

Question

这只是我的第二个帖子，但不会是我的最后一个。

我正在为我的训练营开发一个项目，其中网页的一个部分由 5 个 div 组成，名称分别为 tl-item1、tl-item2 等，其中包含嵌套的 div - 示例如下。

            <div class="tl-bg1" style="background-image: url(./Resources/1970s_Workers2.jpg)"></div>
            <div class="tl-year1">
              <p class="f2 heading--sanSerif">1970-1980</p>              
            </div>
            <div class="tl-content1">
              <h1>Stay in Frame to View Timeline</h1>
              <p>

              </p>       
            </div>
            <div id="timeline1">
              <ul>
                <li><a href="" class="timelineYear">1970</a></li>
                <li><a href="" class="timelineYear">1971</a></li>
                <li><a href="" class="timelineYear">1972</a></li>
                <li><a href="" class="timelineYear">1973</a></li>
                <li><a href="" class="timelineYear">1974</a></li>
                <li><a href="" class="timelineYear">1975</a></li>
                <li><a href="" class="timelineYear">1976</a></li>
                <li><a href="" class="timelineYear">1977</a></li>
                <li><a href="" class="timelineYear">1978</a></li>
                <li><a href="" class="timelineYear">1979</a></li>
                <li><a href="" class="timelineYear">1980</a></li>
              </ul>
            </div>
          </div>

ul/li 是当用户在 tl-item div 或滚动到下一个 div 时应该出现/消失的时间线。我能够使用 JQuery 使其工作（根据浏览器），但由于我是新手，所以我想要一些关于代码是否有效以及这是否是实现效果的最佳方法的反馈 - 下面的代码。

$(document).ready(function(){
  $.easing.easeOutCubic = function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
  }
  
  for(i=0; i<=nums.length; i++){
    $(".tl-item" + nums[i]).mouseenter(function(){
      for(j=0; j <= nums.length; j++){
        $(this).find('#timeline'+ nums[j]).stop(true, true).fadeIn(100, 'easeOutCubic');
      }
    });
  }

   for(i=0; i<=nums.length; i++){
    $(".tl-item" + nums[i]).mouseleave(function(){
      for(j=0; j <= nums.length; j++){
        $(this).find('#timeline'+ nums[j]).stop(true, true).fadeOut(1000, 'easeOutCubic');
      }
    });
  }
});

我使用 Jquery 的原因是因为项目的要求之一是使用我们在课堂上没有学习的 Javascript 库。只要有建设性，就开放并接受所有反馈。

谢谢你。

标签： javascripthtmljquerycss