web-dev-qa-db-ja.com

jQueryで背景画像（CSS：background-image）をフェードインできますか？

テキストを含むdiv要素と、CSSプロパティbackground-imageを介して設定される背景画像があります。 jQuery経由で背景画像をフェードインすることは可能ですか？

div {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
  border: 1px solid #666;
  height: 10em;
}
<div>Text</div>

編集

fiddle を作成して、シナリオを例示しました。基本的に、これは初期のbackground-imageとtransitionを構成し、jQueryでbackground-imageを変更します。私のテストでは、2つの画像間のアニメーション化された遷移はありません。

EDIT2

私の修正された フィドル は動作します！

jquerycsshtml5css3
55
aknuds1

私は何年も探していましたが、最終的にすべてをまとめて解決策を見つけました。人々は、html-backgroundのbackground-image-idをフェードイン/フェードアウトすることはできないと言います。以下のデモを実装することで理解できるため、それは間違いです

CSS：

html, body

height: 100%;   /* ges Hoehe der Seite -> weitere Hoehenangaben werden relativ hierzu ausgewertet */
overflow: hidden;   /*  hide scrollbars */
opacity: 1.0;
-webkit-transition: background 1.5s linear;
-moz-transition: background 1.5s linear;
-o-transition: background 1.5s linear;
-ms-transition: background 1.5s linear;
transition: background 1.5s linear;

JavaScriptを使用して、ボディの背景画像を簡単に変更できるようになりました。

switch (dummy)

case 1:

$(document.body).css({"background-image": "url("+URL_of_pic_One+")"});
waitAWhile();

case 2:
$(document.body).css({"background-image": "url("+URL_of_pic_Two+")"});
waitAWhile();
30
user2947794

おそらくjqueryではありませんが、css3遷移では次の例を参照できます。

http://css3.bradshawenterprises.com/cfimg/

この回答もご覧ください

CSS3フェード効果

23
Richard

不透明度の値は次のように指定できます

div {opacity: 0.4;}

IEには、次のように指定できます

div { filter:alpha(opacity=10));}

値を下げる-透明度を上げます。

5
Dhepthi

そのようにすることはできませんが、divをbackground-imageとtextの間に不透明なdivを重ねてフェードアウトすることで、背景がフェードインしているように見せることができます。

4
thwd

これは私のために働いたものであり、その純粋なCSS

css

html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }

  body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }

  #bg {
    width: 100%;
    height: 100%;
    background: url('/image.jpg/') no-repeat center center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    -webkit-animation: myfirst 5s ; /* Chrome, Safari, Opera */
    animation: myfirst 5s ;
  }

  /* Chrome, Safari, Opera */
  @-webkit-keyframes myfirst {
    from {opacity: 0.2;}
    to {opacity: 1;}
  }

  /* Standard syntax */
  @keyframes myfirst {
    from {opacity: 0.2;}
    to {opacity: 1;}
  }

html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
  <div id="bg">
    <!-- content here -->
  </div> <!-- end bg -->
</body>
</html>
4
tomter2014

最新のブラウザでは、少しのJsとCSS3を使用したはるかに軽量なアプローチを好みます...

transition: background 300ms ease-in 200ms;

このデモを見てください：

http://codepen.io/nicolasbonnici/pen/gPVNbr

3
Nicolas Bonnici

jquery：

 $("div").fadeTo(1000 , 1);

css

    div {
     background: url("../images/example.jpg") no-repeat center; 
    opacity:0;
    Height:100%;
    }

html

<div></div>
1
zyad osseyran

Firefox 4以降、さまざまな方法で背景画像をフェードすることができます...

あなたのCSS：

.box {
    background: #CCCCCC;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
    }
.box:hover {
    background: url(path/to/file.png) no-repeat #CCCCCC;
    }

XHTML：

<div class="box">
    Some Text …
</div>

以上です。

1
yokmp

私は遅れていることを知っていますが、すべてのブラウザで動作するjqueryを使用する方法を見つけました（クロム、firefox、およびIE 9でテストしました）。フォアグラウンド要素は常にcss3遷移プロパティの代わりに表示されます。

2つの絶対ラッパーを作成し、z-indexを使用します。

最初に、最も高いz-indexプロパティ値を使用してフォアグラウンドにある必要がある要素を設定し、他の要素（すべて本体に含まれているため、body {}）をフォアよりも低いz-indexプロパティ値に設定します-ground elements'one、少なくとも2つ以上の数字。

HTMLパーツ：

         <div class="wrapper" id="wrapper1"></div>
         <div class="wrapper" id="wrapper2"></div>

cssパーツ：

        .fore-groundElements{              //select all fore-ground elements
                  z-index:0;               //>=0
        }
       .wrapper{
                  background-size: cover;
                  width:100%;
                  height:100%;
                  background-size: 100% 100%;
                  position:absolute;
         }

        #wrapper1{
               z-index:-1; 
        }


        #wrapper2{
                 z-index:-2;
         }
         body{

              height:100%;
              width:100%;
              margin:0px;   
              display:cover;
              z-index:-3                          //<=-3
         }

javascript/jqueryのものより：

背景画像を3秒ごとに変更する必要があるため、タイムアウトを設定しました。

これはコードです：

  $(document).ready(main);

  var main = function(){

             var imgPath=[imagesPath1,..,...];                 // the array in which store the image paths

             var newWrapper;                     // the wrapper to display 
             var currentWrapper;                 //the current displayed wrapper which has to be faded
             var l=2;                             // the next image index  to be displayed, it is set to 2 because the first two position of the array(first two images) start already setted up
             var imgNumber= imgPath.length;        //to know when the images are over and restart the carousel
             var currentImg;                       //the next image path to be displayed


             $('#wrapper1').css("background-image", 'url'+imgPath[0]);         //pre set the first wrapper background images
             $('#wrapper2').css("background-image", 'url'+imgPath[1]);          //pre set the first wrapper background images   

             setInterval(myfunction,3000);                //refresh the background image every three seconds

             function myfunction(){
                    if(l===imgNumber-1){               //restart the carousel if every single image has already been displayed                  
                         l=0;
                     };

             if(l%2==0||l%2==2){                    //set the wrapper that will be displaied after the fadeOut callback function
                  currentWrapper='#wrapper1';         
                  newWrapper='#wrapper2';
             }else{
                  currentWrapper='#wrapper2';
                  newWrapper='#wrapper1';
             };
             currentImg=imgPath[l];
            $(currentWrapper).fadeOut(1000,function(){               //fade out the current wrapper, so now the back-ground wrapper is fully displayed
                  $(newWrapper).css("z-index", "-1");                //move the shown wrapper in the fore-ground
                  $(currentWrapper).css("z-index","-2");             //move the hidden wrapper in the back ground
                  $(currentWrapper).css("background-image",'url'+currentImg);                   // sets up the next image that is now shown in the actually hidden background wrapper
                  $(currentWrapper).show();          //shows the background wrapper, which is not visible yet, and it will be shown the next time the setInterval event will be triggered
                  l++;                         //set the next image index that will be set the next time the setInterval event will be triggered 
             });


         };                   //end of myFunction
  }                          //end of main

もっと説明が必要な場合はコメントしてください。

私の英語でごめんなさい:)

0
Muccagelato