jQuery與css3 keydown keyCode = 37和39

Question

我已經測試了這兩種方式。 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。但是當我點擊它兩次時，margin-top是23px，它停在1047px。

這不是我想要的。它必須停在1024像素。

我希望如此。

Answer 1

嘗試

var mTop = 0; 
$(document).keydown(function(e){ 
    if (e.keyCode == 39) { 
    var DocHeight = $(document).height(); 
    mTop = mTop - parseInt(DocHeight); 
    $('.container').css("margin-top", mTop); 
    } 
}); 

這只是保持下去，如果你只是希望它的動畫一旦停止，你可以試試：

var mTop = 0; 
$(document).keydown(function(e){ 
    if (e.keyCode == 39) { 
    var WinHeight = $(window).height(); 
    mTop = parseInt(WinHeight); 
    $('.container').css("margin-top", -mTop); 
    } 
}); 

使用文件的高度是一個壞主意與利潤率移動的東西時，也只需添加文件的高度到每次使用「 - =」時，css都會在動畫完成前點擊按鈕時出現問題，並且會添加一個介於某處的值，您應該使用變量來進行數學運算，然後使用該變量設置css爲了一致性。

Answer 2

如果您使用jquery animate，那麼您可以使用.is(":animated")只啓動一個新的動畫，如果一個尚未進行。

var $container = $('.container'); 

if (e.keyCode == 39 && !$container.is(":animated")) { 
    var DocHeight = $(document).height(); 
    $container.animate(...) 
} 

這隻會啓動動畫，如果還沒有進行。

Answer 3

嘗試了這一點：

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

    var DocHeight = $(document).height(); 
    if (DocHeight > 1024) { 
     $('.container').css("margin-top", "1024px") 
    } else { 
     if (e.keyCode == 39) { 
      $('.container').css("margin-top", "-=" + DocHeight) 
     } 
    } 

}); 

此代碼只檢查是否DocHeight高於1024或不。

查找演示這裏：http://jsfiddle.net/shawn31313/fRYwM/
我用$('.container').css("margin-top", "+=" + DocHeight)的例子，但使用它與-也能工作。

編輯： （我知道你不需要它）：

我編輯的代碼，所以它的工作好兩倍：

$(document).ready(function() { 
    check(); 
}); 
$(document).keydown(function(e) { 
    var DocHeight = $(document).height(); 
    if (DocHeight > 1024) { 
     $('.container').css("margin-top", "1024px") 
    } else { 
     if (e.keyCode == 39) { 
      if (DocHeight > 1024) { 
       $('.container').css("margin-top", "1024px") 
      } 
      $('.container').css("margin-top", "+=" + DocHeight) 
     } 
    } 

}); 
$(document).keyup(function(e) { 
    var DocHeight = $(document).height(); 
    if (DocHeight > 1024) { 
     $('.container').css("margin-top", "1024px") 
    } 
}); 
function check() { 
    if (DocHeight > 1024) { 
     $('.container').css("margin-top", "1024px") 
    } 
    check(); 
} 

這個演示是：http://jsfiddle.net/shawn31313/fRYwM/1/