Zepto 动画回调没有动画答案

【问题标题】：Zepto animate callback not animatingZepto 动画回调没有动画
【发布时间】：2013-03-06 09:59:54
【问题描述】：

我正在尝试制作类似于 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');
    });
});

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

编辑：澄清

【问题讨论】：

www.petejodo.com/newindex.html 上的示例
我看到您已将其设为缓入和缓出。这在您的链接中运行良好，您对此代码有什么期望。请。用更多的词来定义，CLARITY 谢谢。
我希望它从右侧滑入，就像它从左侧滑出一样。这就是你正在发生的事情吗？如果是这样，您在哪个浏览器中查看它？编辑对我来说（chrome和firefox），向左滑动效果很好，但它只是在没有动画的情况下弹出到位（第二个动画）
我通常发现当您要移动的范围正好是您要移动的窗格的大小时会发生这种情况。所以它不是“动画”而是跳跃。作为一个测试，dbl 你想要移动的范围的大小。
Zepto 使用 CSS 动画，并在完成动画后将 CSS 动画时间重置为零秒。通过回调动画，它将 CSS 动画时间重置为提供的值。这种切换会导致闪烁且不平滑。您最好使用 setTimeout 来启动第二个动画。 Zepto 的动画回调不适合动画链接。

标签： javascript css animation zepto

【解决方案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;});
           });
    });
});

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

【讨论】：

这出于某种原因我不知道为什么，现在我只是在搞乱它，因为从右边进来的动画有点滞后/不流畅。谢谢！为了更好的解决方案，我会支持您的答案，但暂时不将其标记为正确。如果我可以使用您回答的内容或没有其他人回答我可以使动画流畅，我会标记它
虽然最后我真的不喜欢这个效果并且正在改变它，但它是正确的解决方案。不过，不需要 return false 的最终回调。谢谢