CODEWITHSUNDEEP
javascriptjqueryhtmlfadein
swagdaddy
swagdaddy

Reputation: 3

Jquery fade in an image on website load

<html>
    <head>
        <title>JQuery Page Loading Effect</title>
        <script type="text/javascript" src="jquery.js"></script>
        <style type="text/css">
            div.hidden { display: none }
        </style>
    </head>
    <script type="text/javascript">
        $(document).ready(function () {
            $('div').fadeOut(1);
            $('div').removeClass('hidden');
            $('div').fadeIn(1000);
        });
    </script>
    <body>
        <div class="hidden">
            <p>This is some text.</p>
        </div>
    </body>
</html>

I took this code from a mate, as I'm not really experienced with JQuery, so this doesn't make sense to me. I was just wondering how I could improve this code so that the text eases in during the load of the web page. Thanks in advance!

Upvotes: 0

Views: 33

Answers (1)

Juan Rivillas
Juan Rivillas

Reputation: 957

The fadeOut is not Necessary. And actually you do not need to remove the class hidden Calling fadeIn will display the text

$(document).ready(function() {
    $('div').fadeIn(1000);
});

You use fadeIn to display the text with a little transition. If you don´t need it, just removing the class hidden will work too

Upvotes: 1

Related Questions