click(function) doesn't work

Question

I tried to do some animation with click function button and left/right arrow keyboard, just a simple left-right sliding animation. At first those script works perfectly, til I edit here and there, but not these JS.

When I run it again, only the keyboard based animation works, the button click animation wont work anymore.

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

I do test the the click function with alert, but the alert wont work too.

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

And I already check if I used the wrong class, but now, it's just allright.

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

Here are the keyboard animation script, this keyboard script works fine

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

Maybe I'm missing something. I'll appreciate for ya'll help. Thx.

Answer 1

Remove the trailing comma from your options object. Also, you need to specify the duration for the animation. Also, .project would need to be absolutely or relatively positioned (instead of default of static) for left to have an effect. So:

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

With CSS:

.project {
  position: relative;
}

Instead of:

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

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