Question 11347 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jQuery infinite slideUp and slideDown without clicking

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 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();
});
Tags:

2

Answers


  1. 0

    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 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>
    Login or Signup to reply.
  2. 0 
    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>

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search