在動畫回調中的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動畫效果只有一次

回答

相關問題