Hello,
I have the following code:
$(document).live('keydown',function(event){
var key = event.keyCode;
if(key==39){
TweenMax.to($("#hero"),0.1,{css:{'left':$("#hero").position().left+40}});
}
else if(key==37){
TweenMax.to($("#hero"),0.1,{css:{'left':$("#hero").position().left-40}});
}
else if(key==38){
TweenMax.to($("#hero"),0.3,{css:{'rotation':-30}});
TweenMax.to($("#hero"),0.1,{css:{'top':$("#hero").position().top-10}});
TweenMax.to($("#hero"),0.6,{css:{'rotation':0}});
}
else if(key==40){
TweenMax.to($("#hero"),0.1,{css:{'top':$("#hero").position().top+10,'rotation':30},onComplete:function(){
TweenMax.to($("#hero"),0.1,{css:{'rotation':0}});
}});
}
});
What this does is to read the "arrow" keys from the keyboard and move the element (hero) up/down/left/right
However when pressing the down button continually, the element goes up instead of down, it does not do that when there is no rotation however.
For some reason rotating the object gives it wrong .position().top value.
It used to mess up moving upwards too, but I solved it by resetting the rotation to 0 after the animation (still its a workaround though).
Anyone knows why is this happening? Or how it could be solved/worked around?
You can view this here: http://www.netgfx.com/trunk/scrollingBG/
Thanks in advance.