Zepto animate callback not animating

Question

Я пытаюсь сделать что-то похожее на просмотрщик проекта github, где после щелчка по ссылке коробка перемещается влево из сцены, а затем справа перемещается другая коробка.

Способ, которым я пытался сделать это, состоит в том, чтобы иметь только один div, который анимирован, и когда вы нажимаете на ссылку, div перемещается влево от экрана. Затем в обратном вызове первого animate() я вызываю .css, чтобы переместить его в правую сторону страницы (без анимации, так что он просто перепрыгивает туда), а затем оживить его снова, чтобы переместить его обратно в поле зрения справа.

Вот 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'); 
    }); 
}); 

Так что же происходит, что оживляет в левой части экрана затем переходит на правую сторону правильно, но затем появляется в нужном месте, фактически делает анимацию. Мне любопытно, почему это происходит, потому что это означает, что анимация() выполняется, просто не показывая анимацию?

EDIT: для разъяснения

Answer 1

Попробуйте что-то вроде этого, так как я не в состоянии видеть все зависимости, и, следовательно, не в состоянии создать скрипку за то же самое,

$('.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;}); 
      }); 
    }); 
}); 

Я надеюсь, что это будет делать , так как вы хотите два эффекта, у вас могут быть две функции. :) или больше, если вы хотите или все вместе в одной функции.