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>