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

Add/Remove Class Fade Not Working

本文关键字：淡出 不起作用 淡入 删除 添加      更新时间：2023-09-26

我是开发新手，所以请对我宽容一点：）

我已经开始在我的电子商务平台上创建一个身体背景滑块，我希望它最终能够在一系列身体背景图像中切换（目前还没有实现）。

我已经设法创建了一个页面，通过删除和添加类来切换"上一个"answers"下一个"按钮的身体背景图像，但交叉扫描不起作用，请参阅下面：

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

有人能解释一下为什么褪色不起作用吗？欢迎提供任何指导或建议。非常感谢。

您就快到了。.bodybackground*类上的transition: all 0.5s;应该注意渐变效果。只有一个问题，这个#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;
}
相关文章：