Jqueryの遅延が働いていません

Question

こんにちは、私はいくつかの遅れを持つ単純なアニメーションをしようとしていますが、動作していないので、私に手を差し伸べてください。ここでは、コード

$(document).ready(function() { 
    $('.detailsholder').hide() 
    $(".detailsholder").animate({"top": '-520px'},1) 
    $('.detailsholder').hide() 
    $('.detailsholder').fadeIn(500) 
    $('.detailsholder').delay(5000).animate({'top': "-260px",'easing': "easeInElastic"}, 400).delay(5000).('.detailsholder').animate({'top': "0px",'easing': "easeInElastic"},400); 
}); 

Answer 1

$(function(){ 
    $('.detailsholder').hide().animate({"top": '-520px'},1).fadeIn(500).delay(5000).animate({'top': "-260px",'easing': "easeInElastic"},400).delay(5000).animate({'top': "0px",'easing': "easeInElastic"},400); 
}); 

Answer 2

がある私はあなたがコールバックにそれを置く必要があり、その場合には、アニメーションが終了した後、各delay()が発生するとします。今のように、アニメーションが発生すると遅延が実行されます。

また、コメントでは、実際にステートメントをチェーンし、セミコロンを行末に追加する必要があります。あなたのコードの行6で間違った何かがあり

Answer 3

は（私はより良い読書のために、ここでいくつかの中にその行を分割さ：

$('.detailsholder') 
.delay(5000) 
.animate({'top': "-260px",'easing': "easeInElastic"}, 400) 
.delay(5000) 
.('.detailsholder') // The method is missing here! 
.animate({'top': "0px",'easing': "easeInElastic"},400); 

注：また、あなたのjQueryのコードをチェーンし、各コマンドの後にセミコロンを置く必要があります。 。

遅延が唯一のアニメーションキューに適用されますので、あなたはまた、イベントをキューに入れることができます

Answer 4

私はこのバイオリンを作成しました：。http://jsfiddle.net/scaillerie/Veg59/1/

あなたはこの他のポストを見ることもできます：How to delay jquery animation?。

Answer 5

ここではsolutionです。

$('.detailsholder') 
    .hide() 
    .css('top', '200px') 
    .fadeIn(500) 
    .delay(2000) 
    .animate({'top': "100px", 'easing': "easeInElastic"}, 400) 
    .delay(2000) 
    .animate({'top': "0px", 'easing': "easeInElastic"}, 400); 

アニメーションが非常にユニークであるように、クラスではなくIDを使用することを検討することがあります。

お楽しみください！ :)