在 jQuery 中延迟执行回调函数

Question

我有两个函数在一个元素及其子元素上触发动画（opacity 和 top），第二个是第一个的回调函数。

在它们之间有一个 5 秒的暂停，这是我通过在第二个函数中插入 .delay(5000) before animate(...) 创建的。

它有效，但我正在寻找一种方法来代替 在第一个函数 结束时暂停 5 秒。

原因：我使第二个函数的执行取决于 buttonstate 变量的值（通过单击按钮设置）。但是函数在 5秒延迟之前检查值，这不好，因为如果在这5秒内按下停止按钮，函数仍然会执行...

function fademove_1(slide_nr) { $(".slide_inner").css({"top": "70%", "opacity": "0.01"}); $(".slide_" + slide_nr + " .slide_inner").delay(500).animate({ top: "50%", opacity: 1 }, 700, fadeout_1); } function fadeout_1(slide_nr) { if(buttonstate != "stop"){ $(".slide_" + slide_nr).delay(5000).animate({ opacity: 0.01 }, 2000); }

我就是找不到办法 - 我试过的所有方法都不奏效。有什么建议吗？

Answer 1

如果您想停止动画然后运行尝试 .stop(true, true)。例如：

function fadeout_1(slide_nr) {
    $(".slide_" + slide_nr).stop(true,true).delay(5000).animate({
       opacity: 0.01
    }, 2000);
}`

希望对您有所帮助。

Answer 2

归功于@PitaJ，但这是我在我的特定代码中解决它的方法。我删除了第二个函数的延迟并将它（与 promise().then.(...) 一起）附加到第一个函数，在动画之后，如下所示：

function fademove_1(slide_nr) {
    $(".slide_inner").css({"top": "70%", "opacity": "0.01"});
    $(".slide_" + slide_nr + " .slide_inner").delay(500).animate({
        top: "50%",
        opacity: 1
    }, 700).delay(5000).promise().then(fadeout_1);;
  }
function fadeout_1(slide_nr) {
    if(buttonstate != "stop"){
        $(".slide_" + slide_nr).animate({
          opacity: 0.01
        }, 2000);
    }

在 jQuery 中延迟执行回调函数

Delayed execution of callback function in jQuery

javascript

jquery

jquery-animate