Zepto animate callback not animating

Question

I'm attempting to make something similar to github's project viewer where after clicking a link the box moves to the left out of scene and then another box moves in from the right.

The way I attempted to do this is to have just a single div that's animated, and when you click the link the div moves to the left off the screen. Then in the callback of the first animate(), I call .css to move it to the right side of the page (without animating, so it just jumps there) then animate it again to move it back into view from the right.

Here's the JS

$('.mLink').on('click', function(e) {
    var 
            marginR = $('#mover').css('margin-right'),
            marginL = $('#mover').css('margin-left');

    $('#mover').animate({
            'margin-left': '-1500px',
            'margin-right': '1500px'
    }, 500, 'ease-out', function() {

            $('#mover').css({
                    'margin-left': '1500px',
                    'margin-right': '-1500px'
            });

            $('#mover').animate({
                    'margin-left': marginL,
                    'margin-right': marginR
            }, 500, 'ease-in');
    });
});

So what happens is that it animates to the left of the screen then jumps to the right side correctly but then appears in the proper location without actually doing the animation. I'm curious why this is occurring because it means animate() is executing just not showing the animation?

EDIT: for clarification

Answer 1

Try something like this, as I am not able to see all dependencies, and thus not able to create fiddle for the same,

 $('.mLink').on('click', function(e) {
    var 
            marginR = $('#mover').css('margin-right'),
            marginL = $('#mover').css('margin-left');

    $('#mover').animate({
            'margin-left': '-1500px',
            'margin-right': '1500px'
    }, 500, 'ease-out', function() {

           $('#mover').animate({
               'margin-left': ' 1500px',
               'margin-right': '-1500px'
           }, 500, 'ease-in', function() {

                  $('#mover').animate({
                          'margin-left': marginL,
                          'margin-right': marginR
                  }, 500, 'ease-in', function(){return false;});
           });
    });
});

I hope this will do, as you want two effects you can have two functions. :) or more if you want or all together in one function.