正しいログメッセージにもかかわらずJQueryのfadeIn（）が機能しない

Question

こんにちは！

最近作成したホームページに少し問題があります。私はクラス "content"を使ってHTML divをフェードインしようとしましたが、両方のログメッセージをコンソールに出力しましたが、まだフェードインしていません！

は

私は、当然のことながら、これらのコードで削除されたすべての必要のない情報が

はここに私のHTML

<div class="content"> </div> 

そして、私のCSS

.content{ 
margin: 0px; 
position: fixed; 
display:none 
background-image: url("../img/city_topdown_blurred.png"); 
background-size:cover; 
width: 100%; 
height: 100%; 
} 

、最終的には私のjQueryのスニペット

$(document).ready(function(){ 
    console.log("fading in"); 
    $('.content').fadeIn("slow", function(){ 
    console.log("fading done"); 
    }); 
}); 

両方のログメッセージは、時刻が10000以上に設定されていても、すぐにブラウザ（Chrome） にプッシュされます。

Answer 1

あなたはにその背中を追加display: none後;が欠落しているが、それを解決するよう、ここで働くの例です：行方不明;はそれがdisplay: none background-image: url("../img/city_topdown_blurred.png");を設定したので、それが無効であるだった破ったhttps://jsfiddle.net/nbekm981/1

理由。無効だったので、デフォルトのdisplay: block;（自動的に表示されます）になりました。だからあなたのフェードインは、それがある方法で始まる前にすでに完了していました。あなたはそれを退色する前に画像を事前にロードすることがあります

Answer 2

あなたもdisplay:none;

後にセミコロンが不足している、（背景用）の画像がそう読み込むために少し時間がかかることがあります。

参照を以下実行されているデモ：

$(document).ready(function() { 
 
    // pre-load the image 
 
    $('<img/>').attr('src', 'http://lorempixel.com/1024/1024').load(function() { 
 
    console.log("image done loading"); 
 
    // prevent memory leaks 
 
    $(this).remove(); 
 

 
    // assign image to .content 
 
    $('.content').css('background-image', 'url(http://lorempixel.com/1024/1024)'); 
 

 
    console.log("fading in starts"); 
 
    // fade in 
 
    $('.content').fadeIn(2000, function() { 
 
     console.log("fading done"); 
 
    }); 
 
    }); 
 
});

.content { 
 
    margin: 0; 
 
    position: fixed; 
 
    display: none; 
 
    /*background-image: url("http://lorempixel.com/1024/1024"); 
 
    background-color: green;*/ 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
}

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

Answer 3

jQueryのドキュメントから

.fadeIn（）メソッドは、一致する要素の不透明度をアニメーション化します。これは.fadeTo（）メソッドに似ていますが、そのメソッドは要素の表示を解除せず、最終的な不透明度を指定できます。

display: noneでアニメーション化されるとは思われませんが、opacity: 0でアニメーション化されます。