Voakie February 2016

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?

Answers


Gomzy February 2016

Try this :

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


fermats_last_nerve February 2016

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.

Post Status

Asked in February 2016
Viewed 2,048 times
Voted 5
Answered 2 times

Search




Leave an answer