jqueryのアニメーションが次々と詰まっています

Question

jqueryで4つのアニメーションを作りたいと思います。そのうち3つは同時に起こり、もう1つは他の人が終わった後に起こります。しかし、私のコードは

<script> 
$(document).ready(function(){ 
$("#div1").fadeIn(5000); 
$("#div2").fadeIn(3000); 
$("#div3").fadeIn(1500, function(){ 
$("h3").animate({left: '50%'},3000); 
}); 
}); 
</script> 

Answer 1

私が持っていた問題は、H3た仕事dosn't表示だった：隠されたので、何も表示されない空のdivの内側をレンダリング。それを表示するためにそれを変更していなかったので、アニメーションは役に立たなかった：ブロック。

fadeInを動作させるには、プロジェクトにjQuery UIを組み込む必要があります。 https://jqueryui.com/

私が私の答えに投票した理由はわかりません。しかし、すべて実行した後にヘッダーを移動するコードを更新しました。

$(document).ready(function() { 
 
    $("#div1").fadeIn(5000, function() { 
 
    $("h3").animate({ "left": "50%" }, 3000); 
 
    }); 
 
    $("#div2").fadeIn(3000); 
 
    $("#div3").fadeIn(1500); 
 
});

h3 {position:absolute; } 
 

 
#div1, #div2, #div3 { 
 
display:none; 
 
position:relative; 
 
height:50px; 
 
} 
 

 
#div1 { background-color: red; width:100%; } 
 
#div2 { background-color: green; width:100%; } 
 
#div3 { background-color: blue; width:100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> 
 
<div id="div1"><h3>Wow heading</h3></div> 
 
<div id="div2"><h3>Another heading</h3></div> 
 
<div id="div3"><h3>Last heading</h3></div>