javascript - 使用 Keypress 推进 jQuery 动画队列

Question

在 jQuery 代码中，我试图通过按键从 .animate 调用移动到后续的 .animate 调用，理想情况下能够在队列中向前和向后移动。我现在将我的动画构建为一系列用于串行执行的回调。例如：

<script>
$(document).keydown(function () {
    $("#rect").animate({
        width: "100px",
        height: "100px",
    }, 2000).animate({
        width: "200px",
        height: "200px",
        marginLeft: "500px",
        marginTop: "300px",
    }, 5000);
});
</script>

是否可以使用 .queue 使第二个动画在第二次按键之前不会触发？

感谢您提供任何帮助。

Answer 1

您可以使用 .queue 第二个动画，然后使用 .dequeue 像这样执行它：

$('#rect').click(function(){
$("#rect").animate(
{
    width: "100px",
    height: "100px"
} ,2000)
.queue(function(){
    $(this).animate(
        {
            width: "200px",
            height: "200px",
            marginLeft: "500px",
            marginTop: "300px",
        },5000);

    $(this).click(function(){
        $.dequeue(this);
    });

});