Smooth Movement

Question

Я пытаюсь воссоздать старую игру Mario с помощью jQuery и d pad, и у меня возникли проблемы с тем, чтобы он вскочил и упал на заданное количество, в то время как правый/левый все еще двигался плавно. Вот мой проект до сих пор: 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"); 
     } 
    }