jQuery淡入淡出效果而没有隐藏其他内容

Question

I have a div with class named 'slider' which contains a section(slider-text class) with some header text. 我有一个名为'slider'的类的div，其中包含一个带有一些标题文本的section（slider-text class）。 There are some divs with images inside the slider class. 滑块类中有一些带有图像的div。 These divs are used to create a slideshow. 这些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>

Following css code is used to position the slider-text class absolutely inside slider class. 以下css代码用于将Slider-Text类完全定位在Slider类内。 The images are taking the full width of slider class: 图片占据了滑块类的全部宽度：

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

Following jquery code is used for slider effecet. 以下jquery代码用于滑块效果。 where one div with image is fading out and another is fading in: 其中一个带图片的div逐渐消失，另一个带图片的淡入：

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

But the problem is while a image div is fading out the text inside 'slider-text' class is also hiding. 但是问题在于，当图像div逐渐淡出时，“ slider-text”类中的文本也隐藏了。 And it further appearing while next image div is fading in. The header text should not hide while the image divs are fading out/in behind. 并且在下一个图像div淡入时进一步显示。在图像div淡入/淡入时，标题文本不应隐藏。

Answer 1

Sajjad its not hiding the text, its visible always only the images fading out and in. Just change the text color and check to it. Sajjad没有隐藏文本，它的可见部分始终只有淡入和淡出的图像。只需更改文本颜色并进行检查即可。

In css : 在CSS中：

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

jQuery淡入淡出效果而没有隐藏其他内容

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-02-04 07:25:22

jQuery淡入淡出效果而没有隐藏其他内容

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-02-04 07:25:22

解决方案1
0 已采纳 2017-02-04 07:25:22