Question

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

当我再次运行它时，只有基于键盘的动画才能工作，按钮点击动画将不再起作用。

＆＃13;

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

＆＃13;

我确实使用alert来测试click函数，但警报也不会起作用。

＆＃13;

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

＆＃13;

我已经检查过我是否使用了错误的课程，但是现在，它还没问题。

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

这是键盘动画脚本，这个键盘脚本工作正常

＆＃13;

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

＆＃13;

也许我错过了什么。我很感激你的帮助。 THX。

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

点击（功能）不起作用

1 个答案: