Animationen nacheinander in jquery

Question

Ich möchte 4 Animationen mit jquery machen. 3 von ihnen werden zur gleichen Zeit passieren, und eines wird geschehen, nachdem die anderen fertig sind. aber mein Code dosn't

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

Answer 1

Das Problem arbeite ich mit wurde, war die h3 war Anzeige: versteckt, die das Innere des divs leer so nicht zeigen nichts gemacht. Animate hat nicht geholfen, da es nicht geändert wurde: block.

Damit fadeIn funktionieren kann, muss jQuery UI in Ihrem Projekt enthalten sein. https://jqueryui.com/

Unsicher, warum ich für meine Antwort gewählt worden bin. Aber haben Code aktualisiert, um Header zu verschieben, nachdem alle ausgeführt worden sind.

$(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>