CODEWITHSUNDEEP
javascriptjqueryslidedownslideup
John Mark
John Mark

Reputation: 65

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

Upvotes: 0

Views: 96

Answers (2)

Aaron
Aaron

Reputation: 1727

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>

Upvotes: 0

Mitali Patel
Mitali Patel

Reputation: 427

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

Upvotes: 0

Related Questions