jQuery animate divs on/off screen sequentially with navigation arrows

Question

What i want to do is to slide divs off and on screen sequentially by clicking on navigation arrows left and right according to the direction. When you click the right arrow divs slide on screen from right to left and it works fine. I can't figure out the code for the left arrow so the divs will slide on screen from the opposite direction left to right. Here is a fiddle: http://jsfiddle.net/ykbgT/6696/

There is another question Slide divs off screen using jQuery + added navigation arrows marked as answered but the answer does not give any details for the functions of the navigation arrows.

Here is the code:

HTML

<div class="move left">&larr;</div>
<div class="move right">&rarr;</div>

<div id="container">

<div id="box1" class="box current">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>

</div>

CSS

body {
    padding: 0px;    
}

#container {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;  
}

.box {
    position: absolute;
    width: 50%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 150%;
    top: 100px;
    margin-left: -25%;
}

#box1 {
    background-color: green;
    left: 50%;
}

#box2 {
    background-color: yellow;
}

#box3 {
    background-color: red;
}

#box4 {
    background-color: orange;
}

#box5 {
    background-color: blue;
}
.move{
    position:fixed;
    z-index:2;
    top:50%;
    margin-top:-20px;
    text-align:center;
    padding:20px;
    background:#fff;
    color: #000;
}
.left{
    left:0;
}
.right{
    right:0;
}

JAVASCRIPT

$('.right').click(function(event) {
$('.current').animate({
    left: '-50%'
}, 500, function() {
    $(this).css('left', '150%');
    $(this).appendTo('#container');
    $(this).removeClass('current');
});

$('.current').next().animate({
    left: '50%'
}, 500, function (){
 $(this).addClass('current');
});


});

$('.left').click(function(event) {
$('.current').animate({
    left: '50%'
}, 500, function() {
    $(this).css('left', '-150%');
    $(this).prependTo('#container');
    $(this).removeClass('current');
});

$('.current').prev().animate({
    left: '-50%'
}, 500, function (){
 $(this).addClass('current');
});


});

Answer 1

Working DEMO

Try this

I have edited your code

code

var i = 1;
$('.right').click(function () {
    if (i < $('#container div').length) {
        $("#box" + i).animate({
            left: '-50%'
        }, 400, function () {
            var $this = $("#box" + i);
            $this.css('left', '150%')
                .appendTo($('.container'));
        });
        $("#box" + i).next().animate({
            left: '50%'
        }, 400);
        i++;
    }
});
$('.left').click(function () {

    if (i > 1) {
        $("#box" + i).animate({
            left: '150%'
        }, 400, function () {
            var $this = $("#box" + i);
            $this.css('right', '-150%')
                .appendTo($('.container'));
        });
        $("#box" + i).prev().animate({
            left: '50%'
        }, 400);
        i--;
    }
});

Hope this helps,Thank you

Answer 2

SOLUTION WITH LESS JS AND CSS TRANSITIONS

Help from @BenjaminGruenbaum

Check the working fiddle: http://jsfiddle.net/zPVFd/1/

HTML - class '.current' removed:

<div id="box1" class="box">Div #1</div>

CSS - added css transitions to '.box'

.box {
  position: absolute;
  width: 50%;
  height: 300px;
  line-height: 300px;
  font-size: 50px;
  text-align: center;
  border: 2px solid black;
  left: 150%;
  top: 100px;
  margin-left: -25%;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

}

JS CODE

var boxes = $(".box").get(),
    current = 0;
$('.right').click(function () {
    if (current == (-boxes.length + 1)){
        } else {
        current--;
    updateBoxes();
    }
});

function updateBoxes() {
    for (var i = current; i < (boxes.length + current); i++) {
        boxes[i - current].style.left = (i * 100 + 50) + "%";
    }
}

$('.left').click(function () {
    if (current == 0){
    }else{
    current++;
    updateBoxes();
    }
});