Question

不确定这是否可行，但我正在尝试添加淡入jquery css更改。我也试过使用css transition属性，但没有用。

这是我有多远，但它不起作用。

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

您无法在2 transition之间设置background-image。

你需要将它们放在不同的容器之上，而不是像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。

淡入背景不能正常工作

1 个答案: