JQuery UI addClass callback function being called immediately

Question

I am trying to add a class then remove it using JQuery UI's addClass callback. The problem is the callback is called immediately. I have tried it a few different ways but no matter what the callback calls immediately and never waits for the animation to happen.

Update: I made the changes to easing that were suggested but still the callback fires immediately.

Here are the ways I have tried:

Method 1

function pulsateUp() {
    text.addClass("pulsate-up", 1000, "easeInQuad", pulsateDown);
}
function pulsateDown(){
    console.log("Removing class");
    text.removeClass("pulsate-up", 1000, "easeInQuad");
}

Method 2

function pulsateUp() {
    text.addClass("pulsate-up", 1000, "easeInQuad", function(){pulsateDown()});
}

function pulsateDown(){
    console.log("Removing class");
    text.removeClass("pulsate-up", 1000, "easeInQuad");
}

Method 3

function pulsateUp() {
    text.addClass("pulsate-up", 1000, "easeInQuad", function(){
        console.log("Removing class");
        text.removeClass("pulsate-up", 1000, "easeInQuad");
    });
}

Here is my css in case it has anything to do with the issue:

#animate-demo {
    text-align: center;
    margin: 0 auto;
    width: 99%;
    color: #0972a5;
    font-size: 48px;
    transition: 1s;
}
.pulsate-up {
    transform: scale3d(1.5, 1.5, 1.5);
}

Answer 1

In jQuery UI, easeIn is not a valid easing, the options are

• linear
• swing
• _default
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInSine
• easeOutSine
• easeInOutSine
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

Here's a working example