Question

我对发展很陌生，所以请放轻松我：）

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

我设法创建了一个页面，用＆＃34; Previous＆＃34;切换身体背景图像。和＆＃34;下一步＆＃34;通过删除和添加类但按交叉淡化不起作用的按钮，请参见下文：

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*应该注意淡入淡出效果。只有一个问题，您的转换属性被此#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;
}

添加/删除类淡化不起作用

1 个答案: