jQuery动画中的回调函数只能工作一次

Question

我有两个分页链接，可以触发jQuery动画。

动画的回调函数会触发第二个动画。

这很好，但是只有第一次调用函数时才有效。

每次调用后，第一个动画会起作用，第二个则不会，它只会改变CSS而没有实际效果。

我正在绞尽脑汁，但却毫无作用（也许这就是个双关语吧）。

function switchItem(e) {
    e.preventDefault();

    // If not current piece
    if($(this).hasClass('light')) {

        /*  VARIABLES */
        var container = $('.portfolio footer .portfolio_content');
        var link = $(this).attr('id');
        var newItem = $(this).html();


        /*===================================================
        *   This is the Key part here
        ===================================================*/

            /* FIRST ANIMATION */

            container.animate({
                'right':'-100%'
            }, 300, 'swing',

            // Callback Function
            function() {

                $(this).html('').css({'left':'-100%'});

                $.get('inc/portfolio/'+link+'.php', function(data) {

                    container.html(data);

                    /* SECOND ANIMATION */

                    container.animate({
                        'left':'0%'
                    }, 300, 'swing');

                });
            });     
    }
}

这是演示链接：http://eoghanoloughlin.com/my_site/#portfolio，涉及到IT技术。

- jagershark

---

这是否可能是因为您将动画放入了@get@函数而不是直接放入回调函数中？尝试将动画移到get之外，但仍在回调函数之内。 - MaxOvrdrv

为什么你要对左右进行动画处理？我认为你需要选择一个并坚持使用它。右和左的CSS可能会发生冲突。在这两个container.animate()调用中使用*... - Jason Lydon

你是正确的，它们是冲突的。 - jagershark

Answer 1

请查看这个工作示例，你的左侧与你的第一个右侧-100%动画发生冲突，如果最后不重置右侧，则会与您的第二个左侧动画发生冲突。

http://jsfiddle.net/PAdr3/2/

在进行动画前，请先重置左侧。

container.css('left', 'auto');

并在完成时重置右侧。

container.animate({
     'left':'0%'
 }, 300, 'swing', function() {
    $(this).css('right', 'auto');

 });

- Huangism

---

非常感谢，这正是我需要的修复。 - jagershark

我还有一个问题，如果有人看到的话。在演示中，您可能会注意到动画期间有时图像的一部分会被落下一小段时间。有人知道这个问题的快速解决方法吗？ - jagershark

这是什么时候发生的？你在Fiddle上看到了吗？ - Huangism

请再次检查演示。因为我提到的这个故障，我已经更改了动画，但我已经恢复了旧版本以向您展示。当您点击较浅色的分页时，它会触发该动画。我在这里使用的是非常慢的网络连接，但我相信即使在慢速连接上，它仍然可以工作。我认为这可能与帧速率有关。它并不总是发生，所以您可能需要点击几次才能看到。 - jagershark

抱歉，我没有看到任何故障，我的电脑速度非常快。可能会导致您描述的类似情况的原因是 - 在慢速计算机上，即使动画速度为0，您可能会看到您的div框架滑回到左侧位置。由于您的连接速度较慢，您的$.get可能会导致此问题，您可以尝试将所有动画移动到$.get成功函数中。 - Huangism

Answer 2

我认为animate函数在第一个动画准备好之前不会串联。文档中说：

如果提供了complete回调函数，则在动画完成后将触发该函数。这对于按顺序串联不同的动画非常有用。

像这样的东西可能有效：

function switchItem(e) {
    e.preventDefault();
    // If not current piece
    if($(this).hasClass('light')) {
        /*  VARIABLES */
        var container = $('.portfolio footer .portfolio_content');
        var link = $(this).attr('id');
        var newItem = $(this).html();

        /*===================================================
        *   This is the Key part here
        ===================================================*/
            /* FIRST ANIMATION */
            container.animate({
                'right':'-100%'
            }, 300, 'swing',
            // Callback Function
            function() {
                $(this).html('').css({'left':'-100%'});
                $.get('inc/portfolio/'+link+'.php', function(data) {
                    container.html(data);
                });
            }).complete(
                /* SECOND ANIMATION */
                container.animate({
                    'left':'0%'
                }, 300, 'swing');
            );     
    }
}

- tuvokki

Answer 3

当您用新内容替换页面中的HTML时，它不会自动添加通过JavaScript添加的侦听器或其他jQuery增强功能。

我怀疑在使用$.get获取的内容放入页面后，您需要再次应用这些功能。

另一种选择是将所有内容一次性加载，但将第二个页面隐藏起来。这可能比使用$.get更好。

- Tom Carchrae