jQuery 无点击无限slideUp和slideDown

Question

我在 h3 标签中有一个标题。 我的代码使用 slideUp 可以工作，但 slideDown 看起来很糟糕。 我希望 slideDown 动画像 slideUp 一样流畅。 基本上，从最后一个数组滑到第一个数组，然后循环继续（无限）。 这是我的代码：HTML：

<div class="services-slide-up">
    <h3 class="services-it-consulting">IT Consulting</h3>
    <h3 class="services-web-dev">Web Development</h3>
    <h3 class="services-mobile-app-dev">Mobile App Development</h3>
    <h3 class="services-ui-ux-design">UI/UX Design</h3>
    <h3 class="services-team-dev">Team Development</h3>
    <h3 class="services-software-testing">Software Testing</h3>
</div>

jQuery

$(document).ready(function() {
  var divs = [$(".services-it-consulting"), $(".services-web-dev"), $(".services-mobile-app-dev"), $(".services-ui-ux-design"), $(".services-team-dev"), $(".services-software-testing")]; 
  var i = 0;
  function animateDivs() {
    divs[i].slideDown(1000, function() {
      divs[i].slideUp(1000, function() {
        i++;
        if (i >= divs.length) {
          i = 0;
        }
        animateDivs();
      });
    });
  }
  animateDivs();
});

Answer 1

您有语义问题，我发现嵌套的向上/向下滑动事件非常混乱。 您可以做的是为每个事件设置一个 setTimeout 并将其乘以一个计数器。 此计数器对于 slideDown 事件也应该是一致的。 解决方案可能如下所示。

但是请注意 memory 分配问题，因为 setTimeout 会立即执行。 所以这将总共创建 8 个超时函数。 在这一点上没什么大不了的，但可能会成为一个问题，所以请注意这一点。

 let divs = [$(".services-it-consulting"), $(".services-web-dev"), $(".services-mobile-app-dev"), $(".services-ui-ux-design"), $(".services-team-dev")]; let counter = 0; for(let i = 0; i < divs.length; i++) { setTimeout(function(){ divs[i].slideUp('slow') }, 1000 * counter); counter++; } for(let j = divs.length-1; j >= 0; j--) { setTimeout(function(){ divs[j].slideDown('slow') }, 1000 * counter); counter++; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="services-slide-up"> <h3 class="services-it-consulting">IT Consulting</h3> <h3 class="services-web-dev">Web Development</h3> <h3 class="services-mobile-app-dev">Mobile App Development</h3> <h3 class="services-ui-ux-design">UI/UX Design</h3> <h3 class="services-team-dev">Team Development</h3> <h3 class="services-software-testing">Software Testing</h3> </div>

Answer 2

 loop(); function loop() { let divs = [$(".services-it-consulting"), $(".services-web-dev"), $(".services-mobile-app-dev"), $(".services-ui-ux-design"), $(".services-team-dev")]; let counter = 0; for(let i = 0; i < divs.length; i++) { setTimeout(function(){ divs[i].slideUp('slow') }, 1000 * counter); counter++; } var down=1; for(let j = divs.length-1; j > 0; j--) { setTimeout(function(){ divs[j].slideDown('slow'); down++; // base case if (down == divs.length) { loop(); } }, 1000 * counter); counter++; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="services-slide-up"> <h3 class="services-it-consulting">IT Consulting</h3> <h3 class="services-web-dev">Web Development</h3> <h3 class="services-mobile-app-dev">Mobile App Development</h3> <h3 class="services-ui-ux-design">UI/UX Design</h3> <h3 class="services-team-dev">Team Development</h3> <h3 class="services-software-testing">Software Testing</h3> </div>

我已经习惯了setTimeout向上滑动和自己滑动循环调用function.见代码