jQuery .fadeOut淡出一種顏色然后消失

Question

我的頁面內容等已經實現。

我將div放在頂部，並將其高度和寬度設置為100％以填充屏幕，現在將背景設置為藍色。

我希望它淡出，但是隨着它淡出，我希望內容淡入查看。

我已經嘗試過$（'＃splash'）。fadeOut（'slow'）; 我的問題是，它逐漸淡出為黑色灰色屏幕，然后內容閃爍而不是同時消失。

我已經嘗試過$（“＃splash”）。animate（{opacity：“ 0”}）; 但這只是淡化為灰色，您看不到內容。

有什么想法可以使內容淡入視圖，並使飛濺淡出嗎？

Answer 1

我建議使用CSS，如本例所示。 您可以僅使用CSS來完成此操作。 如果您是jQuery或js，則此鏈接還提供了有關如何執行此操作的示例，但總體而言，使用CSS可以提高性能。

http://css3.bradshawenterprises.com/cfimg/

 #cf2 { position:relative; height:281px; width:450px; margin:0 auto; } #cf2 img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf2 img.top:hover { opacity:0; } @keyframes cf2FadeInOut { 0% { opacity:1; } 45% { opacity:1; } 55% { opacity:0; } 100% { opacity:0; } } #cf3 img.top { animation-name: cf3FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 10s; animation-direction: alternate; } 

 <div id="cf2" class="shadow"> <img class="bottom" src="http://lorempixel.com/400/200" /> <img class="top" src="http://lorempixel.com/400/200/sports" /> </div> <p id="cf_onclick">Hover over image</p>