私のfadeInはなぜ機能しないのですか？

Question

私はすでに他のスタックオーバーフローの質問を使用してそれを理解しようとしましたが、動作しません。最初のアニメーションがjquery（fadeInの有無に関係なく）の準備ができたら、どうすればアニメーションできますか？

$(document).ready(function(){ 
     $('div.sky').animate({height: '40em', opacity: '1'},5000, function() { 
      $('div.grass').fadeIn({opacity: '1'},5000); 
     }); 
}); 

スクリプトは自分のHTMLドキュメントにあります。私はそれが何かエラーがあり、 'div.sky'が動作するかどうかは分かりません。

.sky { 
background: deepskyblue; 
width: 55%; 
margin: auto; 
opacity: 0; 
} 

.grass { 
    background: lawngreen; 
    width: 55%; 
    margin: auto; 
    opacity: 0; 
    height: 5em; 
} 

Answer 1

Here's a working example with your code

JS：更新

$(document).ready(function(){ 
     $('div.sky').animate({height: '10em', opacity: '1'},5000); 
     $('div.grass').delay(5000).fadeIn(); 
}); 

CSS：

.grass { 
    background: lawngreen; 
    width: 55%; 
    margin: auto; 
    display:none; 
    height: 5em; 
} 

display財産、ないopacityで動作しますfadeIn()。

次に、アニメーション完了後に2番目のdivを表示するために、アニメーション期間値のdelay()を追加します。

ドキュメント： delay()：

Answer 2

は単に.fadeIn()ため.animate()に入れ替えます。あなたはすでにopacityに設定してフェードの世話をしています。

$(document).ready(function() { 
 
    $('div.sky').animate({ 
 
    height: '40em', 
 
    opacity: '1' 
 
    }, 5000, function() { 
 
    $('div.grass').animate({ // <---- changed to animate here 
 
     opacity: '1' 
 
    }, 5000); 
 
    }); 
 
});

.sky { 
 
    background: deepskyblue; 
 
    width: 55%; 
 
    margin: auto; 
 
    opacity: 0; 
 
} 
 
.grass { 
 
    background: lawngreen; 
 
    width: 55%; 
 
    margin: auto; 
 
    opacity: 0; 
 
    height: 5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sky"></div> 
 
<div class="grass"></div>