javascript - 添加/删除类淡入淡出不起作用

Question

我是开发新手，所以请放轻松 :)

我已经开始在我的电子商务平台上创建一个 body 背景 slider ，我希望它最终能够通过选择的 body 背景图像进行切换(还没有做到这一点)。

我已经成功地创建了一个页面，通过删除和添加类来使用“上一个”和“下一个”按钮切换主体背景图像，但是交叉淡入淡出不起作用，请参见下文:

https://zoeyplayground-com.zoeysite.com/lookbook

这是我的代码:

HTML

<script>
    jQuery(document).ready(function() {
        jQuery(".next").click(function() {
            jQuery("body").removeClass("bodybackground1").fadeOut('slow');
            jQuery("body").addClass("bodybackground2").fadeIn('slow');
        });
    });
</script>

<script>
    jQuery(document).ready(function() {
        jQuery(".back").click(function() {
            jQuery("body").removeClass("bodybackground2").fadeOut('slow');
            jQuery("body").addClass("bodybackground1").fadeIn('slow');
        });
    });
</script>

<div id="toggle" width="100%">
<img src="/media/import/back.png" class="back">
<img src="/media/import/next.png" class="next">
</div>

CSS

.bodybackground1 { 
    background: url('/media/import/background1.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
    transition: all 0.5s;
}

.bodybackground2 {
    background: url('/media/import/background2.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
    transition: all 0.5s;
}

#toggle img {
    margin-top: 400px;
    display: inline;
}

#toggle .next {
    float: right;
}

#toggle img:hover {
    cursor: pointer;
    opacity: 0.8;
}

谁能解释为什么淡入淡出不起作用？任何指导或建议表示赞赏。非常感谢。

Answer 1

你快到了。 transition: all 0.5s; 在你的 .bodybackground* 类中应该处理淡入淡出效果。只有 1 个问题，您的过渡属性正在被此 #pix-fe 代码覆盖。

#pix-fe {
...
transition: opacity .2s ease;
...
}

你应该检查一下。快速解决方法是在您的 CSS 中执行以下操作:

#pix-fe.bodybackground1 { 
    background: url('/media/import/background1.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
    transition: all 0.5s;
}

#pix-fe.bodybackground2 {
    background: url('/media/import/background2.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
    transition: all 0.5s;
}