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

Question

I have my page content etc already implemented.

I put a div at the top and set its height and width to 100% to fill the screen and the background to blue for now.

I want it to fade out but as it is fading out i want the content to fade in to view.

I have tried $('#splash').fadeOut('slow'); the problem i have with this is that it fades out to a black grey screen then the content flashes up instead of fading into view at the same time.

I have tried $("#splash").animate({opacity: "0"}); but this just fades to grey and you cant see the content.

Any idea how to make the content fade into view and the splash to fade away?

Answer 1

I recommend doing it with CSS, as in this example. You can do it with just CSS like this. If jQuery or js is your thing, this link also has an example on how to do that, but overall your performance is going to be much better using 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>