在keydown保持位置上反映可移動元素

Question

我有一個gif，我用它作爲移動到wasd按鍵的精靈。他向左走，我想在右側移動時反映他（橫向）。我該怎麼做呢？ 我以爲有2個CSS類，並嘗試切換它們，但沒有發生任何事情。

HTML

<div class="sprite"><img src="https://media.giphy.com/media/iPuggAost1xde/giphy.gif" height="55" width="50" /></div> 

CSS

.sprite { 
     position: absolute; 
     top: 48px; 
     left: 540px; 
     width: 50px; 
     height: 50px; 
     } 

    .sprite2 { 
    position: absolute; 
     top: 48px; 
     left: 540px; 
     width: 50px; 
     height: 50px; 
    //reflect 
    -moz-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    transform: scaleX(-1); 
    -ms-filter: fliph; 
    filter: fliph; 
    } 

JS

$(document).ready(function() { 

    $(document).keydown(function(key) { 
     switch(key.which) { 

      // a 
      case 65: 
       $(".sprite").animate({left: "-=10px"}, 'fast'); 
       break; 

      // w 
      case 87: 
       $(".sprite").animate({top: "-=10px"}, 'fast'); 
       break; 

      // d 
      case 68:   
       $(".sprite").animate({left: "+=10px"}, 'fast'); 
     break; 

      // s 
      case 83: 
       $(".sprite").animate({top: "+=10px"}, 'fast'); 
       break; 
     } 
    }); 
}); 

Answer 1

我不熟悉使用jQuery，但搜索了一下之後，我與工作解決方案結束：

增加了2個cla SS：

.right-img { 
    -moz-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1); 
    filter: FlipH; 
    -ms-filter: "FlipH"; 
} 

.left-img { 
    -moz-transform: scaleX(1); 
    -o-transform: scaleX(1); 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
} 

和增加他們/爲相應的按鈕，清除它們：

$("img").removeClass("left-img"); 
$("img").addClass("right-img"); 

Fiddle