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.見代碼