Question

I want to have a full screen image appear when a user visits a site, then after a delay it fades out and reveals the website. I know this can probably be done through jQuery. Does anyone know of a good resource or code snippet for this? Thanks!

Answer 1

Let’s say your image is in div TheIntro and the site is wrapped in a div called TheMainDiv, then you could use jquery for this:

$(document).ready(function () {

    $('#TheIntro').animate({opacity: 0.01}, 500, function () {

        $(this).hide();
        $('#TheMainDiv').fadeIn(500);             

    });   
});

I don’t think you need a plugin for that effect. The first value of 500 is the time it takes for the intro image to fade out and the second value is for the time it takes for the site to fade in.