1

我正在尝试制作类似于 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() 正在执行，只是没有显示动画？

编辑：澄清

4

1 回答 1

3

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

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

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

于 2013-03-18T08:22:21.290 回答