點擊（功能）不起作用

Question

我試圖用單擊功能按鈕和左/右箭頭鍵盤做一些動畫，只是一個簡單的左右滑動動畫。 最初，這些腳本可以完美運行，直到我在這里和那里進行編輯為止，但對這些JS卻不是。

當我再次運行它時，僅基於鍵盤的動畫有效，按鈕單擊動畫不再有效。

 $(document).ready(function(){ $('.btnright').click(function(){ $('.project').animate({ left: '-=150px', }); }); $('.btnleft').click(function(){ $('.project').animate({ left: '+=150px', }); }); }); 

我確實使用警報測試了click功能，但是警報也無法正常工作。

 $(document).ready(function(){ $('.btnright').click(function(){ alert('right'); }); $('.btnleft').click(function(){ alert('left'); }); }); 

而且我已經檢查了我是否使用了錯誤的類，但是現在，一切都很好。

<div class="btnright"><span class="material-icons">keyboard_arrow_right</span></div>
    <div class="btnleft"><span class="material-icons">keyboard_arrow_left</span></div>

這是鍵盤動畫腳本，此鍵盤腳本可以正常工作

 $(document).on("keydown", function(event) { var x = event.keyCode; if (x == 37) { // left $('.project').animate({ left: '+=150px', }); } else if (x == 39) { // right $('.project').animate({ left: '-=150px', }); } }); 

也許我想念一些東西。 我會感謝您的幫助。 謝謝。

Answer 1

從選項對象中刪除結尾的逗號。 另外，您需要指定動畫的持續時間。 此外， .project將需要是絕對或相對定位（而不是靜態默認值） left有效果。 所以：

$('.btnright').click(function(){
    $('.project').animate({
        left: '-=150px'
    }, 500);
});

使用CSS：

.project {
  position: relative;
}

代替：

$('.btnright').click(function(){
    $('.project').animate({
        left: '-=150px',
    });
});

Codepen： http ：//codepen.io/anon/pen/WQzazR