1

我有一个简单的应用程序，当您单击右侧时，右侧部分进入，当您单击左侧时，左侧部分进入。它就像一个旋转木马，代码更少，动画完全基于 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/

4

1 回答 1

2

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

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

$(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 对事件对象中的许多属性进行了“规范化”，所以我只是用来e.which获取关键代码。

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

于 2013-10-20T19:53:45.250 回答