javascript - Zepto 动画回调不动画

Question

我正在尝试制作类似于 github 的元素查看器的东西，在单击链接后，框会向左移出场景，然后另一个框会从右侧移入。

我尝试这样做的方法是只有一个动画的 div，当您单击链接时，div 会移到屏幕左侧。然后在第一个 animate() 的回调中，我调用 .css 将其移动到页面的右侧(没有动画，所以它只是跳到那里)然后再次对其进行动画处理以将其从右侧移回 View 中。

这是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');
    });
});

所以发生的事情是，它在屏幕左侧进行动画处理，然后正确地跳到右侧，但随后出现在正确的位置，但实际上并没有执行动画。我很好奇为什么会发生这种情况，因为这意味着 animate() 正在执行但不显示动画？

编辑:澄清

Answer 1

尝试这样的事情，因为我无法看到所有依赖项，因此无法为相同的项创建 fiddle ，

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

我希望这样做，因为你想要两个效果，你可以有两个函数。 :) 或更多(如果需要)或全部在一个函数中。