3

我正在为移动的块设置动画，并使用 step 选项在每一步检查布尔值是否已切换为 true。如果它确实被切换，我想停止动画并将我正在制作动画的属性设置为某个值。这是我现在拥有的代码

$("#block").animate( { bottom: "+=128" },
{ duration:200,
easing: "easeOutCubic",
step: function(){
        if( stopped == true ){
            $("#block").stop().css("bottom", "none");
            $("#block").css("bottom", "5px");
            //setTimeout( function(){ $("#block").css("bottom", "5px"); }, 1);
        }
    },
complete: function(){
        //complete function
    }
}

);

如果我将代码延迟 1 毫秒（注释行），它就可以工作。如果没有其他方法，我愿意使用它，但我更想知道为什么设置 css 属性在 step 选项中不起作用，但在 timeout 函数中起作用。或者，如果我只是在这里遗漏了一些基本的东西。谢谢你的帮助。

4

1 回答 1

1

迟到的答案，但我想出了如何在一步内停止你的动画。

只需使用$(this).stop(). 然后您可以设置最终属性：

$("#block").animate( { bottom: "+=128" }, {
    duration:200,
    easing: "easeOutCubic",
    step: function(now, fx) {

        if( stopped == true ) {

            $(this).stop();

            $("#block").css("bottom", "none");
            $("#block").css("bottom", "5px");

        }
    },
    complete: function() {
        //complete function
    }
}
于 2018-12-22T04:25:56.103 回答