javascript - Javascript动画：停止多次跳转

Question

我已经让这个角色用 javascript 移动了。

一切正常，通过将键码绑定到这个角色，我得到了流畅的动画。我尝试用spaceBar.

问题-

我的角色跳得很好，但跳了很多次。我尝试添加event.preventDefault() 但这并没有奏效。

我只想要一个平滑的跳跃，只要我按下空格键。

这是跳转的代码-

if(spaceBar)
    {
        box.animate({top:"-50"},100)
        .animate({top:"50"},100);
        event.isDefaultPrevented();
    }

和小提琴——

score 0 · Accepted Answer

这对我有用：

if(spaceBar)
{
    box.clearQueue().animate({top:"-=50"},100).animate({top:"+=50"},100);
}

score 0 · Accepted Answer

将要返回的动画（倒地，我猜你可以称之为）添加到上一个动画的完成参数中：

if(spaceBar)
{
    box.animate({top:"-50"},100,function(){
        box.animate({top:"50"},100);
    })
    event.isDefaultPrevented();
}

这是一个JSFiddle

score 0 · Accepted Answer

你会想要使用 jQuery 的.clearQueue()函数 ( http://api.jquery.com/clearQueue/ )

if(spaceBar)
{
    box.clearQueue().animate({top:"-50"},100).animate({top:"50"},100);
}

3 回答 3