CODEWITHSUNDEEP
jquerycssfadeinstartup
Voakie
Voakie

Reputation: 169

Call script when site is opened

How to let a script start as soon as the site is loaded? I want the Website content i have to fade in, but didn't find an event for "when site open" yet.

And basically, on the site you can switch betweent two "contents". Im only as far as the first "content" to fadeOut on button press, but wanted the things above to be done first.

I tried to use a CSS animation, but then there is no fade effect, so the "content" disapears after a few seconds. Here the code i want to use:

<script>
$(document).ready(function(){
    $("#button").click(function(){
        $("#main").fadeOut(200);
    });
});
</script>

And that part of the code works just fine. So, can anybody help me or find another solution?

Upvotes: 0

Views: 72

Answers (2)

Gomzy
Gomzy

Reputation: 431

Try this :

$(document).ready(function() {
    $("#main").fadeIn(200);
});

Upvotes: 0

fermats_last_nerve
fermats_last_nerve

Reputation: 145

The function defined inside $document.ready() is called when the page loads. Just make sure that the item you are trying to fade is hidden by default (display:none will work in css).

To make sure that the fadeout of your first section is finished before your second section starts fading in, try using the setTimeout() function. Remember to set the display:none attribute for your second section.

$('#main button').click(function(){
    $("#main").fadeOut(1000);
    setTimeout(function(){
        $("#secondary").fadeIn(1000);
    }, 1000);
}

Check out this CodePen for an example of this all together.

Upvotes: 3

Related Questions