淡入背景无法正常工作答案

【问题标题】：Fade in background is not working properly淡入背景无法正常工作
【发布时间】：2014-09-04 04:05:26
【问题描述】：

不确定这是否可能，但我正在尝试将淡入添加到 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)");
    });
});

有什么见解吗？

【问题讨论】：

“有什么见解吗？”太宽泛了。您可能想阅读how to best ask questions。
fade in background jquery的可能重复
回调函数在“慢”fadeIn 之后执行。所以本质上这将是一个非常即时的变化。
感谢@Morklympious，原谅我的无知，边学js。你的意思是我应该先改变css然后把fadeIn嵌套在里面吗？谢谢！
你想淡入背景吗？请添加一些html。

标签： javascript jquery css fadein

【解决方案1】：

您不能在 2 个background-image 之间设置transition。

您需要将它们设置在彼此之上，放入不同的容器中，而不是使用 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。

【讨论】：

谢谢，这是很好的信息。如果可行，我会尝试并接受。