CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SwegreDesigns
SwegreDesigns

Reputation: 189

jQuery addClass not working on pageload

Hey I have a problem that is getting on my nerves and I dont get why this happens. I want to when the page loads, my h1-tag get the class .load so it fades in with a nice effect, the problem is that the addClass dont work and my h1-tag never gets the class load. Some help please..?

HTML and jQuery in script-tag: 

<!DOCTYPE html>
<html>
<head>
    <title>New Era of Swegre</title>
    <meta charset="UTF-8"/>
    <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/home.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.wrapper h1').addClass('load');​
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <h1>SWEGRE DESIGNS</h1>
    </div>

</body>
</html>

CSS:

body
{background-color:black}
.wrapper
    {
        position: relative;
    }
    h1 {
    opacity: 0;
    color:white;
    font-size: 21px;
    text-align: center;
    transition: opacity 1s ease-in;
}

.load {
        color:white;
    opacity: 1;

}

Upvotes: 0

Views: 1295

Answers (1)

Nima Parsi
Nima Parsi

Reputation: 2110

Replace your code with the following and it will work as you desire.

        $(document).ready(function () {
            $('.wrapper h1').addClass('load');
        });
 

.wrapper {
    position: relative;
}
h1 {
    opacity:0;
    color:black;
    font-size: 21px;
    text-align: center;
    transition: opacity 1s ease-in;
}
.load {
    opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
     <h1>SWEGRE DESIGNS</h1>
</div>

Upvotes: 1

Related Questions