身体背景图像淡入

Question

I'm trying to replicate the fade in the background image of this site . How would I go about doing so with jQuery?

Answer 1

Use an image as a background image. ie, <img /> tag. Then use jQuery's .animate() function:

$(document).ready(function(){
    $('img.bg').animate({
        opacity: 1;
    }, 1000);
});

CSS:

.bg {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

HTML:

<img src="bgimage.png" class="bg" />

Answer 2

Working demo http://jsfiddle.net/9HTkV/ (and coz I like hulk) :P

Start with opacity 1 and then make it zero as it is fade in.

This should help :)

code

        $('.box2').animate({
            opacity: 0
        });

​

CSS in start you want Opacity to be 1 and then make it 0.

.box2 {
    height: 500px;
    width: 700px;
    background: #000000;
    opacity: 1;
}