Is there a way to smoothly slide a div left and right using jQuery animation? I have been trying to achieve this by implementing the code below, which can be found in this fiddle.
The issue I am facing is that every time I click on the left or right button, the div resets back to its original position instead of continuing from where it currently is. What could be causing this behavior? I want the div to shift left or right based on its current position with each click.
<div id="yellowbox"></div>
<div id="left">left</div>
<div id="right">right</div>
<script>
var left = $('#yellowbox').offset().left;
console.log(left);
jQuery(document).on('click', '#left', function(event) {
$("#yellowbox").css({left:left}).animate({"left": (left -50)}, "slow");
});
jQuery(document).on('click', '#right', function(event) {
$("#yellowbox").css({left:left}).animate({"left": (left +50)}, "slow");
});
</script>
<style>
#yellowbox {
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 550px;
background: yellow;
}
</style>