Question

http://a.pomf.se/hjhsav.webm

我正在创建一个菜单，其中箭头键向左或向右移动整个UI。

使用Javascript：

$('.xmb').css('left','+=175px')

CSS：

.xmb{
position: relative;
top: 240px;
left: 310px;
transition: left .2s;}

问题在于，如果我敲击箭头键或按住箭头键，转换会在完成之前再次触发，并被中断。它随后无法移动175px（按箭头键），菜单变得不合适。我尝试使用jQuery动画，但结果更糟糕（动画没有中断，因此落后于菜单应该的位置。我可以交替敲击箭头键然后放开，菜单会左右移动一些为了一些奇怪的原因，它也没有像CSS过渡一样移动菜单。）

是否有一种简单的方法可以让转换在中断的情况下跳转到最终位置？如果我在不到0.2秒内按下左箭头键3次，我希望它移动3 * 175px。

由于

Answer 1

如果你只有一步，你可以检查左边是否为0，然后移动它。

$('button').click(function(e){
    e.preventDefault();
    if($('.xmb').css('left')=="0px"){
        $('.xmb').css('left','+=175px');
    }
})

如果您有多个步骤，则可以使用模数运算符，并仅在结果为0时移动

Modulus operator

$('button').click(function(e){
    e.preventDefault();
    if(parseInt($('.xmb').css('left')) % 175==0){
        $('.xmb').css('left','+=175px');
    }
})

如果您需要在第二次单击或按键时删除转换，则必须创建一个单独的转换类，并在需要时添加/删除。 JSfiddle

如果转换中断，则完成CSS更改

1 个答案: