CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
Jake
Jake

Reputation: 93

.animate() slider not working correctly

I am not sure exactly how this works but I have a review slider and it just doesn't work correctly.

If I click the left arrow, it will slide once to the right, which is correct. When I click the right arrow it slides back to it's original position, but after that it won't let me do anything.

I just want it so every time I click it, it will move 750px either left or right on each click.

$(document).ready(function(){
    var boxL = $('.box-left');
    var boxR = $('.box-right');

    boxL.click(function(){
     $('.grid-container').animate({"right": 750}, "slow");
    })
    boxR.click(function(){
        $('.grid-container').animate({"left": 0}, "slow");
    })
})

Upvotes: 1

Views: 60

Answers (1)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

$(document).ready(function(){
    var boxL = $('.box-left');
    var boxR = $('.box-right');

    boxL.click(function(){
        $('.grid-container').animate({"left": "-=50"}, "slow");
    })
    boxR.click(function(){
        $('.grid-container').animate({"left": "+=50"}, "slow");
    })
})
.grid-container
{
  background-color: orange;
  height: 60px;
  margin-bottom: 20px;
  position: relative;
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="grid-container">
</div>

<button class="box-left">Left</button>
<button class="box-right">Right</button>

Upvotes: 1

Related Questions