Question

我有这个简单的应用程序，当你点击右边，右边的部分进来，当你点击左边时，左边的一个进来。它就像一个旋转木马使用较少的代码和动画纯粹基于CSS。

现在，当我点击右键时，动画即时。在左边，它开始需要几秒钟。

HTML：

<div class="wrap">
<div class="box box1"></div>
<div class="box box2"></div>
</div>

CSS：

body{overflow:hidden}
.wrap{width:2500px;overflow:hidden}
.box{height:20px;width:20%;background:red;margin:20px 8px;float:left;

-webkit-transition: all 2s;
  transition: all 2s;
}

JS：

$(document).keyup(function (e) {
    var c = (e.keyCode ? e.keyCode : e.which);
    e.preventDefault;
    if (c == 39) {
      $(".box1").css("margin-left", "-100%");        
    }
    if (c == 37) {
      $(".box1").css("margin-left", "0");
    }
});

这与溢出有关吗？这是一个错误吗？

jsFiddle：http://jsfiddle.net/dp8VS/1/

Answer 1

.css("margin-left", "-100%")将.box1的左边距设置为其容器的100%（在这种情况下为2500px），因此转换不会延迟，只是为了让div进入视野需要一段时间。

由于您为div使用宽度20%，请尝试：

$(document).keyup(function (e) {

    e.preventDefault();

    if (e.which === 39) {
        $(".box1").css("margin-left", "-20%");
    } else if (e.which === 37) {
        $(".box1").css("margin-left", "0");
    }

});

此外，jQuery'标准化'event object中的很多属性，所以我只使用e.which来获取密钥代码。

魔术：http://jsfiddle.net/EThDb/3/

过渡动画：全部;保证金权利的奇怪延迟

1 个答案: