点击（功能）不起作用

Question

我尝试用点击功能按钮和left/right箭头键盘做一些动画，只是一个简单的左右滑动动画。起初那些脚本运行良好，直到我在这里和那里编辑，但不是这些 JS。

当我再次运行时，只有基于键盘的动画有效，按钮点击动画不再有效。

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

我确实用警报测试了点击功能，但警报也不起作用。

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

而且我已经检查过我是否用错了class，但是现在，一切都好了。

<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',
    });
});

代码笔：http://codepen.io/anon/pen/WQzazR

点击（功能）不起作用

click(function) doesn't work

html

javascript

animation

click