JQuery wait until ToggleClass function completed

Question

I am using ToggleClass to trigger an animation from css and need to call a function after the animation has ended. I'm calling a function from the typed.js library.

 $('.anim').toggleClass('slide-down');
      $(".sentence").typed({
        strings: ["first sentence", "Second sentence." ],
        typeSpeed: 45,
        backDelay: 500,
        callback: function(){}
});

how can I make the typed function wait till the toggleClass has finished?

possible duplicate of [how to wait for css transition to finish before applying next class](http://stackoverflow.com/questions/18592933/how-to-wait-for-css-transition-to-finish-before-applying-next-class) — Tushar Gupta - curioustushar, Mar 22 '14 at 12:31

Arun P Johny · Accepted Answer · 2014-03-22T12:45:41.750

6

You can wait for the animationend event

$('.anim').toggleClass('slide-down').one('animationend', function () {
    $(".sentence").typed({
        strings: ["first sentence", "Second sentence."],
        typeSpeed: 45,
        backDelay: 500,
        callback: function () {}
    });
});

Or if you are using transition, then use transitionend

Demo: Fiddle

edited Mar 22 '14 at 12:45

answered Mar 22 '14 at 12:29

Arun P Johny

384,651
66
527
531

it's actually a transition, How can I use transitionend? – Farzan Mar 22 '14 at 12:34
2

@Farzan replace `animationend` with `transitionend` – Arun P Johny Mar 22 '14 at 12:37

JQuery wait until ToggleClass function completed

1 Answers1