これは、左、右、および上部のアニメーションdivが左側、右側、および上部から移動すると正常に機能しますが、下部のdivでは機能せず、下部を移動できません。また、キーを10回以上すばやく押すと、ウィンドウ画面から四方八方から外に出て、1つのアニメーションが終了した後にキーを押すと、外に出られません。
私のhtmlコード:
<body>
<div class="block"></div>
</body>
私のCSSコード:
div {
position: absolute;
background-color: #abc;
left: 50px;
top:50px;
width: 100px;
height: 100px;
}
私のjqueryコード:
$(window).load(function(e) {
$("body").keydown(function(e) {
var width1 = $(window).width();
var heigth1 = $(window).height();
if(e.keyCode == 37) { // left
if (parseInt($('.block').css('left')) >= 50) {
$('.block').animate({left: '-=50'},"slow");
}
}
else if(e.keyCode == 39) { // right
if (parseInt($('.block').css('left')) <= (width1 - 150)){
$(".block").animate({left: "+=50px"},'slow');
}
}
else if(e.keyCode == 40){ // bottom
if (parseInt($('.block').css('top')) <= (height1 - 150)) {
$(".block").animate({'top':'+=50px'},'slow');
}
}
else if(e.keyCode == 38){ // top
if (parseInt($('.block').css('top')) >= 50) {
$(".block").animate({'top':'-=50px'},'slow');
}
}
});
});