Why are these animations not the opposite?

Question

I am trying to play the animation in reverse order using jQuery. The original animation (which works great) is as follows:

    function initialSuccess(){
    $('#box3').animate({
                left: '-50%'
                    }, 300, function() {
            $('#box3').css('left', '150%');
             });

            $('#box3').next().animate({
                left: '50%'
            }, 300);

};
function initialError(){
    $('.step3-tag').html("Whoops, Something Went Wrong");
    $('.loader').replaceWith("<img src='images/error.png' id='error-img'>");
    $('#box3').append("<button class='step3-retry-button' id='retryBtn'>Try Again</button>")
$('#retryBtn').click(function() {


    $('#box3').empty();

    $('#box3').animate({
                left: '150%'
                    }, 300, function() {
            $('#box3').css('left', '150%');
             });

            $('#box3').prev().animate({
                left: '50%'
            }, 300);
             $('#box3').append("<h3 class='step3-tag'>Let Us Check That For You, One Sec!</h3> <div class='loader'></div>")
}

);
}

Any ideas why this is happening? I also tried to leave the numbers the same, but changing direction from leftto right, but that also didn't work.

Information added This is a JsFiddle example, I'm trying to change the animation (go from div 3 to div 2 if the user clicks a button)

http://jsfiddle.net/jtbowden/ykbgT/

Information added

    function initialSuccess(){
    $('#box3').animate({
                left: '-50%'
                    }, 300, function() {
            $('#box3').css('left', '150%');
             });

            $('#box3').next().animate({
                left: '50%'
            }, 300);

};
function initialError(){
    $('.step3-tag').html("Whoops, Something Went Wrong");
    $('.loader').replaceWith("<img src='images/error.png' id='error-img'>");
    $('#box3').append("<button class='step3-retry-button' id='retryBtn'>Try Again</button>")
$('#retryBtn').click(function() {


    $('#box3').animate({
                left: '-50%'
                    }, 300, function() {
            $('#box3').css('left', '-50%');
             });

            $('#box3').next().animate({
                left: '-50%'
            }, 300);

});
}

initialSuccess() - , , div , div . initialFailure() , , , "". initialFailure() - , / div () .

Answer 1

, :

$('.box').click(function () {
    $('.box').each(function () {
        if ($(this).offset().left < 0) {
            $(this).animate({
                left: '50%',
            }, 500);
        } else if ($(this).offset().left > $('#container').width()) {
            $(this).css("left", "-150%");
        } else {
            $(this).animate({
                left: '150%',
            }, 500);
        }
    });
});

http://jsfiddle.net/af88ukfx/1/

, , , , , - :

function initialError2() {
    $('.step3-tag').html("Whoops, Something Went Wrong");
    $('.loader').replaceWith("<img src='images/error.png' id='error-img'>");
    $('#box3').append("<button class='step3-retry-button' id='retryBtn'>Try Again</button>")
    $('#retryBtn').click(function () {
        $('#box3').animate({
            left: '150%'
        }, 300);

        $('#box3').prev().animate({
            left: '50%'
        }, 300);
    });
}

Answer 2

$(document).ready()

. https://jsfiddle.net/q7jud6yq/