Question

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.

Answer 1

Try

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

This just keeps on going, if you just want it to animate once and stop, try something like:

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

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.