在动画回调中的jQuery动画效果只有一次

我有两个触发jQuery动画的分页链接。在动画回调中的jQuery动画效果只有一次

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

这工作得很好，但是，它只能在第一次函数被调用。

每一次之后，第2部动画作品的，第二个没有，它只是改变了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

来源

2013-04-17 loxyboi

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

你为什么左右动画？我认为你需要选择并坚持下去。右侧和左侧的css可能有冲突。 *在两个container.animate（）调用... –

你是对的，他们是冲突的。 – loxyboi

看到这里的工作样本一个更好的选择，你的左边是你的第一个路口右转-100％的动画，并在年底，如果你不重置权发生冲突，然后它会与你发生冲突第二向左动画

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

复位动画

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

前左和右复位完成时

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

});

来源

2013-04-17 14:31:32 Huangism

非常感谢，这是我需要的修复。 – loxyboi

如果有人看到这个，我还有一个问题。在演示过程中，您可能会注意到，有时图像的一部分会被瞬间抛开。有人知道这个问题的快速解决吗？ – loxyboi

这是什么时候发生的？你在小提琴上看到它吗？ – Huangism

我认为，直到第一个动画准备animate函数时不串。该文档说：

如果提供，完成回调函数将激发一旦动画完成。这对于按顺序串联不同的动画非常有用。

像这样的东西可能会奏效：

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

来源

2013-04-17 14:27:51 tuvokki

当你更换新的内容页面的HTML，它不会自动添加监听或者是通过JavaScript添加了其他的jQuery增强。

我怀疑你需要你把你的内容获取与不用彷徨$进入页面后再次申请这些。

另一种方法，是增加一个载的所有内容，但要在第二页隐藏。这可能是比使用$不用彷徨

来源

2013-04-17 14:28:30

在动画回调中的jQuery动画效果只有一次

回答

相关问题