在背景中淡入淡出

-1

不確定這是否可能，但我試圖添加一個淡入到jQuery的CSS變化。我也嘗試過使用CSS轉換屬性，無濟於事。在背景中淡入淡出

這是我有多遠，但它不工作。

HTML：

<section id="primary" class="home-section-hero"> 
    <div class="bcg" data-anchor-target="#primary"> 
     <ul> 
      <li data-pid="1"> 
       <img src=「folder/path」> 
      </li> 
     </ul> 
    </div> <!-- .bcg --> 
</section> <!-- #primary -->

CSS：

#primary { 
    height: 100%; 
    width: 100%; 
} 

#primary .bcg { 
    background: url("images/miscreated-bg.jpg"); 
    background-attachment: fixed; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    box-shadow: 10px 5px 15px rgba(0, 0, 0, 0.5) inset; 
    height: 100%; 
    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5); 
    width: 100%; 
    -webkit-transition-delay: 500ms; 
    -moz-transition-delay: 500ms; 
    -o-transition-delay: 500ms; 
    transition-delay: 500ms; 
}

的jQuery：

$("li[data-pid='1'] img").click(function() { 
    $("#primary .bcg").fadeIn("slow", function() { 
     $(this).css("background", "url(http://ericbrockmanwebsites.com/dev7/wp-content/themes/AntCas/player-images/bgs/Titanic-bg.jpg) no-repeat fixed center center/cover rgba(0, 0, 0, 0)"); 
    }); 
});

任何見解？

來源

2014-09-03 Eric Brockman

「有什麼見解？」太廣泛了。您可能想閱讀[如何最好地提出問題]（http://stackoverflow.com/help/how-to-ask）。 – Anonymous 2014-09-03 19:49:47

[fade in background jquery]的可能重複（http://stackoverflow.com/questions/17825194/fade-in-background-jquery） – LcSalazar 2014-09-03 19:50:07

回調函數在'slow'fadeIn之後執行。所以基本上這將是一個非常即時的變化。 – Morklympious 2014-09-03 19:50:10

您不能在2 background-image之間設置transition。

你需要把它們放在eachothers進型動物的容器的頂部，除了可以用opacity和z-index例如褪色：這裏一個例子：http://codepen.io/gcyrillus/pen/DJdja

基礎

body:before, body:after { 
    content:''; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    position:absolute; 
    z-index:1; 
    background-size: cover; 
    animation:bgfade 10s infinite; 
    animation-direction: alternate; 
    opacity:1; 
}

隨着身體的背景，你可以淡入/淡出3個不同的圖像。通過js，jQuery或CSS。

來源

2014-09-03 20:05:26

謝謝，這是很好的信息。我會試試看，如果有效，請接受。 – 2014-09-03 20:09:32

在背景中淡入淡出

回答

相關問題