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 4 days ago 100 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