jquery - 背景画像をフェードインする方法は？

Question

画像をプリロードして、準備ができたらフェードインしたい。プリローダーは動作していますが、フェード効果が得られません。

私が試したこと：

1：CSS3トランジション-背景画像では機能しません。

2：jQueryのfadeIn-HTML要素でのみ機能し、CSSの背景画像では機能しません。要素をフェードしようとすると、すべての要素もフェードします。

jQuery：

$(bg).imagesLoaded({
    done: function($images){
        $('body').css('background-image', "url('" + $images[0].src + "')");

CSS：

body{
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
}

私はこれを達成するための巧妙な方法がないかもしれないことを理解していますが、私はそれが例えばここで行われるのを見たので、方法がなければなりません：http: //movies.io/m/4I/en。

score 1 · Accepted Answer

背景画像ソリューションが本当に必要な場合は、要素を作成し、それらに背景画像を設定します。次のようになります。

background-image: url('http://placekitten.com/200/300');<br>

次に、jQueryを使用して個々の要素をアニメーション化します。

これがデモンストレーション用のフィドルです：http：
//jsfiddle.net/robertp/6rXjs/3/embedded/result/

乾杯、
ロブ

score 0 · Accepted Answer

あなたはこのようなことをする必要があります

<div> <-- the block
    <div class="background">
    </div>
    <div class="content">
    ...
    </div>
</div>

position：absoluteを使用して、.contentを.backgrounddivの上に配置します。そして、アップルは.backgroundにフェードインします。これは、divで不透明な背景が必要な場合にも使用されます。

score 0 · Accepted Answer

最終的に、追加のdiv要素を必要としないより洗練されたソリューションを使用しました。

ここで何が起こるかというと、画像が背景の読み込みを完了すると、画像cssがjqueryで追加され、ボディカラーを白に設定するクラスがフェードアウトします。それが誰かに役立つことを願っています！

jQuery :(画像ロード関数内）

$('body').css('background-image', "url('" + $images[0].src + "')");
$('#wrapper').removeClass("bgFade", 700);

CSS：

.bgFade{
    background-color:#FFF;
}

3 に答える 3