动画回调中的jQuery动画只工作一次答案

【问题标题】：jQuery animate within animate callback works only once动画回调中的jQuery动画只工作一次
【发布时间】：2013-04-17 23:02:13
【问题描述】：

我有两个触发 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

【问题讨论】：

会不会是因为你把动画放到了@get@函数里而不是直接放到回调函数里？尝试将动画移到 get 之外，但在回调中。
为什么要为左右设置动画？我认为你需要选择并坚持下去。左右 css 可能有冲突。 * 在两个 container.animate() 调用中...
你是对的，他们是冲突的。

标签： javascript jquery animation

【解决方案1】：

在此处查看工作示例，您的左侧与您的第一个右侧 -100% 动画冲突，最后如果您不重置右侧，它将与您的第二个左侧动画冲突

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

在动画之前向左重置

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

完成后立即重置

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

 });

【讨论】：

非常感谢，这是我需要的修复程序。
我还有一个问题，如果有人看到这个。您可能会在演示中的动画过程中注意到，有时部分图像会在一瞬间被留下。有人知道该问题的快速解决方案吗？
这种情况什么时候发生？你在小提琴上看到了吗？
再次查看演示。由于我指的是这个故障，我改变了动画，但我已经把旧版本放回去给你看。当您单击较浅的阴影分页时，它会触发该动画。我在这里的互联网连接速度非常慢，但我很确定即使连接速度很慢，它仍然会这样做。我认为这可能与帧速率或其他东西有关。它不会每次都发生，因此您可能需要点击几次。
对不起，我没有看到任何故障，不过我的电脑速度很快。可能导致您所描述的事情的事情 - 在一台速度较慢的计算机上，即使动画速度为 0，您也可能会看到 div 的帧滑回左侧位置。您的 $.get 可能会导致这种情况，因为您的速度很慢连接，您可以尝试移动 $.get 成功函数中的所有动画

【解决方案2】：

当您将页面中的 html 替换为新内容时，它不会自动添加侦听器或通过 javascript 添加的其他 jquery 增强功能。

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

另一种选择是在一次加载中添加所有内容，但隐藏第二页。这可能是比使用 $.get 更好的选择

【讨论】：

【解决方案3】：

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

如果提供，完成回调函数会在动画完成。这对于串接不同的动画按顺序排列在一起。

这样的事情可能会奏效：

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

【讨论】：