jQuery infinite slideUp and slideDown without clicking

0 votes

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

May 11, 2023 in UI UX Design by vijaytejashwini

edited Mar 5, 2025 477 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP