動畫回調中的jQuery動畫只能工作一次

Question

我有兩個分頁鏈接觸發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

Answer 1

在這里查看工作示例，你的左邊與你的第一個右邊-100％動畫相沖突，最后如果你沒有重置右邊那么它會與你的第二個左邊動畫沖突

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

在制作動畫之前重置左側

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

並在完成后重置

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

 });

Answer 2

我認為animate函數在第一個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');
            );     
    }
}

Answer 3

當您使用新內容替換頁面中的html時，它不會自動添加通過javascript添加的偵聽器或其他jquery增強功能。

我懷疑在將使用$ .get獲取的內容放入頁面后，您需要再次應用這些內容。

另一種方法是在一次加載中添加所有內容，但隱藏第二頁。 這可能是比使用$ .get更好的選擇