在背景中淡入淡出

-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

在背景中淡入淡出

回答

相关问题