带有 css3 keydown keyCode = 37 和 39 的 JQuery
我已经测试了两种方式。 jquery动画和css3过渡，并且css3更快一点。但我对以下代码有一个问题：
$(document).keydown(function(e){
if (e.keyCode == 39) {
var DocHeight = $(document).height();
$('.container').css("margin-top","-="+DocHeight)
}
});
如果我在 keyCode 39（向右箭头）上敲击两次，那么我的过渡是外太空。有人有解决这个问题的办法吗？
外太空
也许不是正确的词。但问题是。如果我按两次箭头键，我将得到最后一个请求，换句话说......动画开始，另一个动画从我不想要的位置开始。
示例：点击#1 margin-top 位于 0px，然后变为 1024px。但是当我点击它两次时，边距顶部为 23px，并且停在 1047px。
这不是我想要的。它必须停在 1024px。
我希望如此。
I have tested both ways. jquery animation and css3 transition, and css3 is a little bit faster. But i have a problem with the following code:
$(document).keydown(function(e){
if (e.keyCode == 39) {
var DocHeight = $(document).height();
$('.container').css("margin-top","-="+DocHeight)
}
});
if i hit twice on keyCode 39 (arrow to the right) than my transition is outer space. Does anyone has an solution for this thing?
outer space
maybe not the correct word. But the problem is. if i hit twice the arrow key i'll get the last request, in other words... animation is started, and another animation start from the position that i don't want.
example: hit #1 margin-top is at 0px and goes to 1024px. but when i hit it twice the margin-top is at 23px, and it stops at 1047px.
This is not what i want. It has to stop at 1024px.
I hope so.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
试试这个：
此代码仅检查 DocHeight 是否高于 1024。
在这里查找演示：http://jsfiddle.net/shawn31313/fRYwM/
我使用
$('.container').css("margin-top", "+=" + DocHeight)作为示例，但将其与-一起使用就可以了也。编辑：
（我知道你不需要它）：
我编辑了代码，因此它的效果加倍：
此演示是：http://jsfiddle.net/shawn31313/fRYwM/1/
Try this out:
This code just checks if
DocHeightis above 1024 or not.Find an Demo Here: http://jsfiddle.net/shawn31313/fRYwM/
I use
$('.container').css("margin-top", "+=" + DocHeight)for the example but using it with the-will work too.Edit:
(I know you don't need it):
I edited the code so it works twice as good:
The demo for this is: http://jsfiddle.net/shawn31313/fRYwM/1/
尝试
这个继续下去，如果你只想让它动画一次然后停止，请尝试以下操作：
在移动带有边距的内容时使用文档高度是一个坏主意，也只需每次使用“-=”将文档高度添加到CSS中" 当您在动画完成之前点击按钮时会出现问题，并且它会添加到介于两者之间的值，您应该在变量中进行数学计算，并使用该变量来设置 css 以保持一致性。
Try
This just keeps on going, if you just want it to animate once and stop, try something like:
Using document height is a bad idea when moving stuff with margins, also just adding the document height to the css each time with "-=" will cause problems when you hit the button before the animation is finished and it adds to a value that is somewhere inbetween, you should do the math in a variabe instead, and use that variable for setting the css for consistency.
如果您使用 jquery
animate，那么您可以使用.is(":animated")来仅启动新动画（如果尚未进行）。如果动画尚未开始，这只会启动动画。
If you use jquery
animatethen you can use.is(":animated")to only start a new animation if one isn't already in progress.This will only start the animation if one is not already in progress.