jQuery.fadeOut淡出为一种颜色，然后消失

jQuery .fadeOut fades out to a colour then disappears

本文关键字：颜色 一种 然后 消失 淡出 fadeOut jQuery      更新时间：2023-09-26

我已经实现了我的页面内容etc。

我在顶部放了一个div，并将其高度和宽度设置为100%，以填充屏幕，现在背景为蓝色。

我希望它淡出，但当它淡出时，我希望内容淡出观看。

我尝试过$（'#splash'）.fadeOut（'slow'）我遇到的问题是，它会逐渐消失在黑灰色屏幕上，然后内容会闪烁起来，而不是同时消失在视图中。

我尝试过$（"#splash"）.animate（｛opacity:"0"｝）但这只是逐渐变灰，你看不到内容。

你知道如何让内容淡出视野，让飞溅的东西消失吗？

我建议使用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>

相关文章：