点击（功能）不起作用

Question

我尝试用点击功能按钮和左/右箭头键盘做一些动画，只是一个简单的左右滑动动画。起初这些脚本运行良好，直到我在这里和那里编辑，但不是这些 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');
       
    });
});

我已经检查过我是否使用了错误的类，但是现在，没关系。

<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