Fade in background не работает должным образом

Question

Не уверен, что это возможно, но я пытаюсь добавить затухание в смену 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)"); 
    }); 
}); 

Любые идеи?

Answer 1

Вы не можете установить transition между 2 background-image.

Вы должны установить их на вершине eachothers Into Дифференц контейнеров, чем может исчезнуть с 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.