JQuery UI 立即调用addClass回调函数

Question

我正在尝试添加 class，然后使用 JQuery UI 的 addClass 回调将其删除。问题是立即调用回调。我已经尝试了几种不同的方式，但无论回调立即调用什么，都不会等待动画发生。

更新： 我按照建议对缓动进行了更改，但回调仍然立即触发。

以下是我尝试过的方法：

方法一

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

方法二

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

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

方法三

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

这是我的 css 如果它与问题有关：

#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

在jQueryUI中，easeIn不是有效的缓动，选项是

• 线性
• 摇摆
• _默认值
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInSine
• easeOutSine
• easeInOutSine
• easeInCirc
• easeOutCirc
• easeInOutCirc
• 缓动弹性
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

Here's a working example