jQuery infinite slideUp and slideDown without clicking-CodePudding

I have a title that is in the h3 tag. My code works using slideUp but slideDown looks so bad. I want the slideDown animations smooth like in slideUp. Basically, slideDown from the last array to the first array, and then the cycle continues (an infinite). Here is my code: HTML:

<div >
    <h3 >IT Consulting</h3>
    <h3 >Web Development</h3>
    <h3 >Mobile App Development</h3>
    <h3 >UI/UX Design</h3>
    <h3 >Team Development</h3>
    <h3 >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();
});

CodePudding user response：

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 >
    <h3 >IT Consulting</h3>
    <h3 >Web Development</h3>
    <h3 >Mobile App Development</h3>
    <h3 >UI/UX Design</h3>
    <h3 >Team Development</h3>
    <h3 >Software Testing</h3>
</div>

I have used to setTimeout to slide up and slide own to call function in looping.see in the code

CodePudding user response：

You have semantic issues and I find the nested slide up / down event very confusing. What you can do is to place a setTimeout on each event and multiply it by a counter. This counter should be consistent also for the slideDown event. A solution could look like the following.

However be aware of memory allocation issues since the setTimeout is executed immediately. So this will create 8 timeout functions in total. Not a big deal at this point but can become an issue, so please be aware of that.

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 >
    <h3 >IT Consulting</h3>
    <h3 >Web Development</h3>
    <h3 >Mobile App Development</h3>
    <h3 >UI/UX Design</h3>
    <h3 >Team Development</h3>
    <h3 >Software Testing</h3>
</div>