jquery淡出效果不隐藏其他内容答案

【问题标题】：Jquery fading effect without hiding other contentsjquery淡出效果不隐藏其他内容
【发布时间】：2017-02-04 07:03:19
【问题描述】：

我有一个名为“slider”的类的 div，其中包含一个带有一些标题文本的部分（滑块文本类）。滑块类中有一些带有图像的 div。这些 div 用于创建幻灯片。

<body>
     <div class="slider">
            <section class="slider-text">
                <h1>header</h1>
                <p>Some header text</p>
            </section>
            <div>
                <img src="images/Photography-Camera-HD-Wallpaper1.jpg">
            </div>
            <div>
                <img src="images/Amazing-mountains-in-nature-Big-size-Wallpaper.jpg">
            </div>
     </div>
</body>

以下 css 代码用于将滑块文本类绝对定位在滑块类中。图片占据了滑块类的全部宽度：

 .slider {
    position: relative;
    text-align: center;
    width: 100%;
    height: 98vh;
}
.slider img {
    max-width: 100%;
    max-height: 100vh;
    width: 100%;
    height: 98vh;
    }

.slider-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    color: white;
}

以下 jquery 代码用于滑块效果。其中一个带有图像的 div 正在淡出，而另一个正在淡入：

$(".slider > div:gt(0)").hide();
setInterval(function () {
    $('.slider > div:first')
        .fadeOut(1000)
        .next('div')
        .fadeIn(2000)
        .end()
        .appendTo('.slider');
}, 6000);

但问题是，当图像 div 淡出时，'slider-text' 类中的文本也被隐藏了。并且在下一个图像 div 淡入时进一步出现。当图像 div 淡出/在后面时，标题文本不应隐藏。

【问题讨论】：

滑块动画效果之间的文本应该可见，对吧？
请提供最后的小提琴。我也需要这个
请检查这个小提琴jsfiddle.net/4y3krkmv

标签： javascript jquery html css image

【解决方案1】：

Sajjad 它没有隐藏文本，它始终可见，只有淡入淡出的图像。只需更改文本颜色并检查它。

在 css 中：

.slider-text h1,.slider-text p{ z-index:3;}

【讨论】：

这不起作用。请为它提供小提琴。我想我错过了什么
你是否改变了文本 Mohtisham 的颜色
是的，它确实逐渐淡入淡出
我认为你的立场有问题。只需确定位置：绝对；为 h1 看看。无论是淡出还是淡入..
jsfiddle.net/RajeshBaskaran/jzzbu5fd/1 查看标题和 p 标签之间的差异。两者之间的唯一差异是位置：绝对