Jquery的淡入淡出效果，而不隐藏其他内容

我有一个名为'滑块'类的div，它包含一些标题文本部分（slider-text class）。在滑块类中有一些带有图像的div。这些div用于创建幻灯片。Jquery的淡入淡出效果，而不隐藏其他内容

<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代码用于滑块效果。其中一个分度，图像淡出而另一个衰落：

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

但问题是，同时图像的div被淡出“滑块文本”类中的文本也被隐藏。当下一个图像div淡入时，它会进一步出现。当图像div淡出/落在后面时，标题文本不应该隐藏。

来源

2017-02-04 Sajjad Raihan

文本应该滑块动画努力之间可见的，对不对？ –

请提供最后的小提琴。我也需要这个 –

请检查这个小提琴https://jsfiddle.net/4y3krkmv/ –

Sajjad它没有隐藏文本，它的可见性总是只有图像淡出和进入。只需更改文本颜色并检查它。

在CSS：

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

来源

2017-02-04 07:25:22

这是行不通的。请为它提供小提琴。我想我失去了一些东西 –

你是否改变了文字的颜色Mohtisham –

yap它确实渐渐淡入淡出 –

Jquery的淡入淡出效果，而不隐藏其他内容

回答

相关问题