Question

我的页面内容已经实现。

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

我希望它淡出，但随着它逐渐消失，我希望内容可以淡入查看。

我尝试过 $（＆＃39;＃splash＆＃39;）。fadeOut（＆＃39; slow＆＃39;）; 我遇到的问题是它逐渐消失一个黑色的灰色屏幕，然后内容闪烁而不是同时淡入视图。

我尝试过 $（＆＃34;＃splash＆＃34;）。animate（{opacity：＆＃34; 0＆＃34;}）; 但这只是淡化为灰色而你无法看到内容。

任何想法如何让内容淡入视野，闪现消失？

Answer 1

我建议使用CSS，就像在这个例子中一样。你可以用这样的CSS做到这一点。如果jQuery或js是你的东西，这个链接也有一个如何做到这一点的例子，但总的来说你的表现会更好用CSS。

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: