Javascript 动画回调中的jqueryanimate只工作一次

我有两个分页链接，它们触发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);
                });
            }).complete(
                /* SECOND ANIMATION */
                container.animate({
                    'left':'0%'
                }, 300, 'swing');
            );     
    }
}

---

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

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

---

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

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

在设置动画之前重置左侧

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

并在完成后立即重置

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

 });

---

这是否可能是因为您将动画放在@get@函数中，而不是直接放在回调函数中？尝试将动画移到get外部，但要移到回调内部。为什么要设置左右动画？我认为你需要坚持下去。左右css可能相互冲突。*在两个container.animate（）调用中…您是对的，它们相互冲突。非常感谢，这是我需要的修复。如果有人看到这一点，我还有一个问题。在演示的动画过程中，您可能会注意到，有时图像的一部分会在一瞬间被留下。有人知道这个问题的快速解决方法吗？什么时候发生的？你在小提琴上看到了吗？再看看演示。我改变了动画，因为我指的是这个小故障，但我已经把旧版本放回去给你看。单击较亮的着色分页时，将触发该动画。我这里的互联网连接速度非常慢，但我很确定即使是在慢速连接上，它也能做到这一点。我想这可能和帧速率有关。这不是每次都会发生，所以你可能需要点击几次。对不起，我没有看到任何故障，尽管我的电脑速度很快。可能导致类似于您所描述的情况的事情-在速度较慢的计算机上，您可能会看到div的一帧滑回左侧位置，即使动画速度为0。您的$.get可能导致此问题，因为您的连接速度较慢，您可以尝试在$.get success函数中移动所有动画

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

 });