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的淡入淡出效果，而不隱藏其他內容

回答

相關問題