web-dev-qa-db-ja.com

変化する背景画像をフェードする方法

このコードを実行するときに画像をフェードインしたい：

$("#large-img").css('background-image', 'url('+$img+')');

私は非常に多くの場所にフェードを入れてみました。

ありがとう

jquerybackgroundfade
45
fadejquery

これはおそらくあなたが望んでいたものです：

$('#elem').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow', 1);

1秒遅れで：

$('#elem').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(' + $img + ')');
}).delay(1000).fadeTo('slow', 1);
74
MacMac

別のソリューションを提供できますか？

私もこれと同じ問題を抱えていましたが、背景だけでなく要素全体がフェードしたため、フェードは機能しませんでした。私の場合、要素はボディなので、背景をフェードするだけでした。

これに取り組むためのエレガントな方法は、要素をクラス化し、背景にCSS3トランジションを使用することです。

_transition: background 0.5s linear;_

ToggleClassまたはコードを使用して背景を変更すると、$("#large-img").css('background-image', 'url('+$img+')');はクラスで定義されたとおりにフェードします。

55
Rampant Creative Group

これは、背景画像をフェードするために見つけた唯一の合理的なものでした。

<div id="foo">
  <!-- some content here -->
</div>

あなたのCSS; CSS3 transition で拡張されました。

#foo {
  background-image: url(a.jpg);
  transition: background 1s linear;
}

今、背景を交換します

document.getElementById("foo").style.backgroundImage = "url(b.jpg)";

ほら、色あせて！

明白な免責事項：ブラウザがCSS3 transitionプロパティをサポートしていない場合、これは機能しません。その場合、画像は変化しますwithoutトランジション。与えられた<1%ユーザーのブラウザのCSS3はCSS3をサポートしていません。おそらく問題ありません。自分をからかわないで、大丈夫です。

21
user633183

上記のRampant Creative Groupのソリューションに基づいて、jQueryを使用してbodyタグの背景画像を変更していました。

例えば.

$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-sea.jpg) fixed', 'background-size': '100% 100%'});

$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-trees.jpg) fixed', 'background-size': '100% 100%'});

2つのステートメントを切り替えるjavascriptタイマーがありました。

FadeOut-> fadeInエフェクトを作成する問題を解決するために私がしなければならなかったのは、Rampant Creative Groupの提案を使用して追加することだけでした。

transition: background 1.5s linear;

私のコードに。今ではフェードアウトし、美しくなります。

Rampant Creative GroupとSoupEnvyの編集に感謝します!!

6
Ben

私はこの同じ問題を抱えていたが、私にとってはうまくいかなかったので、誰かがこのスレッドを指摘してくれました。何時間も検索した後、これを使用して解決策を見つけました- https://github.com/rewish/jquery-bgswitcher#readme

フェード以外のいくつかのオプションもあります。

1
Bizzaro

背景画像をフェードし、前景のテキスト/画像を残そうとする場合、cssを使用して背景画像を新しいdivに分割し、テキスト/画像を含むdivの上に配置して、背景divをフェードできます。

0
iandayman

これは役立つかもしれません

HTML

<div id="textcontainer">        
    <span id="sometext">This is some information </span>
    <div id="container">

    </div>
</div>

CSS

#textcontainer{
    position:relative;
    border:1px solid #000;
    width :300px;
    height:300px;
}
#container{
    background-image :url("http://dcooper.org/gallery/cf_appicon.jpg");
    width :100%;
    height:100%;
}
#sometext{
    position:absolute;
    top:50%;
    left:50%;
}

Js

$('#container').css('opacity','.1');
0
Anooj

不透明度はあなたの目的を果たしますか？

もしそうなら、これを試してください：

$('#elem').css('opacity','0.3')
0
Soulbe