jQueryのアニメーションが最後に向かってゆっくりと少し揺れ動く

Question

私はパワーポイントのようにいくつかのページを持っています。最初のいくつかのトランジションは完全に機能しますが、最後の2つのトランジションは時間がかかりすぎて終了しません。アニメーションの時間を減らすと、次のアニメーションと重なるので、setTimeout（）を使用しなければなりません。ここで私はあなたが間違っていた正確に何を伝えることはできませんが、作品の場合、私は罰金今のコードの一部を書き直しとフィドルhttp://jsfiddle.net/yWAgp/

var currentPageNumber = 1; 
jQuery.easing.def = "linear"; 

$(document).ready(function() { 
    $(".divContentContainer").center(); 
    AnimatePage1(); 
}) 

jQuery.fn.center = function() { 
    this.css("position", "absolute"); 
    this.css("top", (($(window).height() - this.outerHeight())/2) + 
    $(window).scrollTop() + "px"); 
    this.css("left", (($(window).width() - this.outerWidth())/2) + 
    $(window).scrollLeft() + "px"); 
    return this; 
} 

var ResetPageContainer = function() { 
    $(".pages").html(""); 
} 

var AnimatePage1 = function() { 
    ResetPageContainer(); 
    $('.pages').html($("#page-1").html()); 
    $('.page-1-img').animate({ 
     opacity: 100, 
     width: "538px", 
     height: "166px" 
    }, 3000, function() { 
     $(this).fadeOut(1000); 
     setTimeout(function() { AnimatePage2(); }, 1200); 
    }); 
}; 

var AnimatePage2 = function() { 
    ResetPageContainer(); 
    $('.pages').html($("#page-2").html()); 
    $('.page-2-img').animate({ 
     opacity: 100, 
     width: "698px", 
     height: "151px" 
    }, 3000, function() { 
     $(this).fadeOut(1000); 
     setTimeout(function() { AnimatePage3(); }, 1200); 
    }); 
}; 

var AnimatePage3 = function() { 
    ResetPageContainer(); 
    $('.pages').html($("#page-3").html()); 
    $('.page-3-img').animate({ 
     opacity: 100, 
     width: "894px", 
     height: "116px" 
    }, 3000, function() { 
     $(this).fadeOut(1000); 
     setTimeout(function() { AnimatePage4(); }, 4000); 
    }); 
}; 

var AnimatePage4 = function() { 
    ResetPageContainer(); 
    $('.pages').html($("#page-4").html()); 
    $('.yours').animate({ 
     opacity: 100, 
     width: "585px", 
     height: "276px" 
    }, 3000, function() { 
     $(this).fadeOut(1000); 
     setTimeout(function() { AnimatePage5(); }, 6000); 
    }); 
}; 

var AnimatePage5 = function() { 
    ResetPageContainer(); 
    $('.pages').html($("#page-5").html()); 
    $('.tommylogo').animate({ 
     opacity: 100, 
     width: "960px", 
     height: "120px" 
    }, 3000, function() { 

    }); 
}; 

おかげ

Answer 1

だ - 今http://jsfiddle.net/alnitak/j5zeL/

コードを参照してくださいルックスは、以下のような：

var load = function(id) { 
    $('.pages').empty(); 
    $(id).appendTo('.pages').show(); 
}; 

var AnimatePage1 = function() { 
    load('#page-1'); 
    $('.page-1-img').animate({ 
     opacity: 100, 
     width: "538px", 
     height: "166px" 
    }, 3000).fadeOut(1000, AnimatePage2); 
}; 

... 

注：

1. 明示的にのコンテンツをディスプレイにのDOMエレメントとして移動します。アニメーションを繰り返す必要がある場合は、.clone()を追加してください。ただフェードアウト