Add/Remove Class 淡入淡出不起作用

Question

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

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

我已经成功地创建了一个页面，通过删除和添加类，用 "Previous" 和 "Next" 按钮切换 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;
}

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

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;
}

Add/Remove Class 淡入淡出不起作用

Add/Remove Class Fade Not Working

html

javascript

css

jquery

fade