衰落節的背景圖片 - 只有背景

我有這個節衰落節的背景圖片 - 只有背景

<section ID="Cover"> 
     <div id="searchEngine">hello</div> 
    </section>

我想淡入/淡出封面的背景圖像。我正在使用以下功能來做到這一點，但它會淡化整個部分。有沒有一種方法可以淡化背景？類似於

$("#Cover").css("background-image").fadeOut(); ??

（我也是在這個函數設置此圖片是第一次）

var imageID=0; 
var time=0; 
function changeimage(every_seconds) 
{ 
    //change the image 
    if(imageID==0) 
    { 
     $("#Cover").fadeOut(time, function() { 
     $("#Cover").css("background-image", "url(images/cover1.jpg)"); 
     $("#Cover").fadeIn(time);}); 
     imageID++; 
     time=1000; 
    } 
    else 
    { 
     if(imageID==1) 
     { 
      $("#Cover").fadeOut(time, function() { 
      $("#Cover").css("background-image", "url(images/cover2.jpg)"); 
      $("#Cover").fadeIn(time);}); 
      imageID++; 
     } 
     else 
     { 
      if(imageID==2) 
      { 
       $("#Cover").fadeOut(time, function() { 
       $("#Cover").css("background-image", "url(images/cover3.jpg)"); 
       $("#Cover").fadeIn(time);}); 
       imageID++; 
      } 
      else 
      { 
       if(imageID==3) 
       { 
        $("#Cover").fadeOut(time, function() { 
        $("#Cover").css("background-image", "url(images/cover4.jpg)"); 
        $("#Cover").fadeIn(time);}); 
        imageID++; 
       } 
       else 
       { 
        if(imageID==4) 
        { 
         $("#Cover").fadeOut(time, function() { 
         $("#Cover").css("background-image", "url(images/cover5.jpg)"); 
         $("#Cover").fadeIn(time);}); 
         imageID=0; 
        } 
       } 
      } 
     } 
    } 
    //call same function again for x of seconds 
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000)); 
}

來源

2013-09-27 Tehreem

可能重複http://stackoverflow.com/questions/5002351/jquery-fade-css-background-image-change – Greenhorn

您應該應用背景蓋的子元素將採取封面元素的所有尺寸。然後調用這個孩子的動畫方法 –

如果您使用圖像（即img標籤）而不是CSS背景圖片，則可以輕鬆完成此操作。 –

我TrueBlueAussie同意，這將是比較容易，如果你正在使用的不是CSS背景IMG。這是一個工作示例。

<html> 
    <head> 
     <style type="text/css"> 
     #bgImg { position: fixed; width: 100%; height: 100%; top:0; left: 0; z-index: -1;} 
     #mainContent{width: 960px; margin: 20px auto; padding: 15px; background: #f2f2f2; text-align: center;} 
     </style> 
    </head> 
    <body> 
     <img src="yourImg.jpg" id="bgImg"> 
     <section id="mainContent"> 
      <h2>Your Heading</h2> 
      <p>Your content....</p> 
      <button id="inBtn">Background Image fade in</button> 
      <button id="outBtn">Background Image fade out</button> 
     </section> 
    </body> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script> 

     /* 
      resize function 
      From Dave Jay's Blog 
      url: http://davejay.exit42design.com/entry/Design/44/ 
     */ 

     function resize(){ 
      $("#bgImg") 
      .width($(window).width()) 
      .height($(window).width() * .67); 

      if($("#bgImg").height() <= $(window).height()){ 
       $("#bgImg") 
       .height($(window).height()) 
       .width($(window).height() * 1.5); 
      } 

     } 

     $(document).ready(function(){ 


      resize(); 


      $("#inBtn").on("click",function(){ 
       $("#bgImg").fadeIn(); 

      }); 

      $("#outBtn").on("click",function(){ 
       $("#bgImg").fadeOut(); 

      }); 

     }); 

     $(window).resize(function(){ resize(); }); 

    </script> 
</html>

來源

2013-09-27 11:50:32 Cameron

完美無缺！謝謝：） – Tehreem

衰落節的背景圖片 - 只有背景

回答

相關問題