Question

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

更新：我对建议的更改进行了更改，但仍然会立即触发回调。

以下是我尝试过的方法：

方法1

let results = [];

let pace = value => {console.log(value); results.push(value); return results};

let slow = () => new Promise((resolve) => {
  setTimeout((value) => {  
    resolve(value);  
  }, 2000, "slow");
});

let instant = () => new Promise((resolve) => {
    resolve("instant");  
});

let quick = () => new Promise((resolve) => {
  setTimeout((value) => {  
    resolve(value);  
  }, 1000, "quick");
});

slow().then(pace)
.then(instant).then(pace)
.then(quick).then(pace)
.then(res => console.log("finished, results:", res))
.catch(error => console.log(error));

方法2

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

方法3

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

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

这是我的CSS，以防它与此问题有关：

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

Answer 1

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

线性
摆动
_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

立即调用JQuery UI addClass回调函数

1 个答案: