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

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*175 像素。

谢谢

Answer 1

如果你只有一步，你可以检查 left 是否为 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