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

所以会发生的是，它会动画到屏幕左侧，然后正确跳转到右侧，然后显示在正确的位置，而不实际动画。我很好奇为什么会这样，因为这意味着animate（）正在执行而不显示动画？

编辑：澄清

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;});
           });
    });
});

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

Zepto动画回调没有动画

1 个答案: