在jquery中一個接一個的動畫

-2

我想用jquery製作4個動畫。其中3個會同時發生，其他發生後會發生。但我的代碼dosn't工作在jquery中一個接一個的動畫

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

來源

2017-04-09 fanis theologiths

您可以爲這一問題的工作小提琴。 –

會發生什麼？代碼如何工作？ – miken32

我遇到的問題是h3顯示：隱藏其中呈現內部divs空，所以不顯示任何東西。 Animate沒有幫助，因爲它不會將其更改爲顯示：block。

對於淡入工作，您需要將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>

來源

2017-04-09 17:21:13 JohnV

這是一個答案或另一個問題？你怎麼知道什麼CSS被應用於問題中的元素？ – miken32

我沒有，我知道如何divs必須顯示：無;開始。另外我忘了詢問用戶是否也包含了用於fadeIn工作的jQuery UI庫。 – JohnV

「我遇到的問題」不是開始答案的好方法，這聽起來像一個問題。低代表用戶發佈新問題作爲答案很常見，這可能是爲什麼它被低估了？你也對原始代碼做了很多猜測，沒有證據來支持它們。一旦你的代表升起了一點，你就可以發表評論，在發佈答案之前就這些事情做出澄清。 – miken32

在jquery中一個接一個的動畫

回答

相關問題