How to make smooth animation in toggleClass?

Question

How to make smooth animation, when I use Jquery toggleClass method? I used css transitions, but there is a delay, but there is no smoothness.

.paragraph {
  height: 35px;
  overflow: hidden;
  transition: .5s;
}

Link to my code

or see this: https://stackoverflow.com/questions/9025292/smooth-out-this-jquery-toggle-animation — clearshot66, May 07 '18 at 15:45

score 0 · Answer 1 · answered May 07 '18 at 16:08

0

You can use jQuery's toggleClass to add transition effects: JSFiddle

$('.i-btn').click(function() {
  $(this).prev('.paragraph').toggleClass("paragraph_all", 1000);

  if ($(this).prev('.paragraph').hasClass('paragraph_all')) {
    $(this).text('Show');
  } else {
    $(this).text('Hide');
  }
});

Make sure you also add the jQuery UI link: https://code.jquery.com/ui/1.12.1/jquery-ui.min.js

And here is the documentation & demo.

answered May 07 '18 at 16:08

Jos van Weesel

2,128
2
12
27

Thank you for your answer. That's right, but I don't use jquery ui. – Dan May 07 '18 at 16:23
Hey @Dan, the jQuery UI link is separate from the standard jQuery link and just makes animations such as this possible. You add both of them. Can you accept my answer? :) – Jos van Weesel May 07 '18 at 16:59

How to make smooth animation in toggleClass?

1 Answers1