光滑的運動

Question

我試圖重新使用jQuery和d墊，舊的馬里奧遊戲，我遇到了麻煩，讓他跳起來，跌倒一定數額，同時左/右仍然平穩移動。這裏是我的項目迄今：http://jsfiddle.net/Zeaklous/NpKgc/1/

$(document).ready(function() { 
$(document).keydown(function (key) { 
    switch (parseInt(key.which, 10)) { 
     case 38: 
      $(".mario").animate({ 
       top: "-=50px" 
      }); 
      $(".mario").animate({ 
       top: "+=50px" 
      }); 
      break; 
     default: 
      break; 
     case 83: 
      $(".mario").addClass("crouching"); 
      $('.mario').attr('src', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSstp0TMfI46ImPw3Ynoq8N64Trn9ew70Dzh8NR4u4VLm40nccV'); 
      break; 
    } 
    }); 
}); 
setInterval(movePlane, 20); 
var keys = {}; 
$(document).keydown(function (e) { 
    keys[e.keyCode] = true; 
}); 
$(document).keyup(function (e) { 
    delete keys[e.keyCode]; 
}); 
function movePlane() { 
    for (var direction in keys) { 
     if (!keys.hasOwnProperty(direction)) continue; 
     if (direction == 37) { //left 
      $(".mario").animate({ 
       left: "-=5" 
      }, 0); 
      if (!$('.mario').hasClass('flipped')) { 
       $(".mario").toggleClass("flipped"); 
      } 
     } 
     if (direction == 39) { //right 
      $(".mario").animate({ 
       left: "+=5" 
      }, 0); 
      if ($('.mario').hasClass('flipped')) { 
       $(".mario").toggleClass("flipped"); 
      } 
     } 
     if (direction == 40) { //down 
      if (!$(".mario").hasClass(!"crouching")) { 
       $(".mario").toggleClass("crouching"); 
       $('.mario').attr('src', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSstp0TMfI46ImPw3Ynoq8N64Trn9ew70Dzh8NR4u4VLm40nccV'); 
      } 
     } 
    } 
} 

任何想法，我該怎麼辦呢？如所看到的，在跳躍運動完成後它會橫向移動。

Answer 1

你的動畫語句正在碰撞。既然你已經在使用的時間間隔，就沒有必要用動畫爲左，右：

http://jsfiddle.net/NpKgc/3/

if (direction == 37) { //left 
     $(".mario").css({ 
      left: "-=2" 
     }); 
     if (!$('.mario').hasClass('flipped')) { 
      $(".mario").toggleClass("flipped"); 
     } 
    } 
    /*if (direction == 38) {//up 
     $(".mario").animate({top: "-=5"}, 0); 
    }*/ 
    if (direction == 39) { //right 
     $(".mario").css({ 
      left: "+=2" 
     }); 
     if ($('.mario').hasClass('flipped')) { 
      $(".mario").toggleClass("flipped"); 
     } 
    }