Question

I have a basic image that lays over top the main container that fades in once a user visits the site. I want this event to happen only on the initial load. Can this be accomplished?

Here’s the .js

    <script type="text/javascript">
    $(document).ready(function () {
        $('#landing').animate({opacity: 0.01}, 5000, function () {
            $(this).hide();
            $('#main').children().fadeIn(5000);
        });   
    });
</script>

Thanks in advance!

Answer 1

You could set a cookie and then only run the animation if the cookie isn’t set.

If you want to use jQuery then my recommendation would be to use this jQuery plugin:
https://github.com/carhartl/jquery-cookie

And the do something like:

if (!$.cookie('intro_animation')) {
    $.cookie('intro_animation', 'true');

    // Do your animation
    $('#landing').animate({opacity: 0.01}, 5000, function () {
        $(this).hide();
        $('#main').children().fadeIn(5000);
    }); 
}