Add class when page loads

Question

I have the HTML code

<div class="container">
<div class="content">
<div class="logo"> 
   <a href="http://www.afterquote.com/"> <img src="logo.jpg" alt="logo" /></a>
</div>
<!--logo--> 
</div>
<!--content--> 
</div>
<!--container-->

CSS

.logo.animated {
    border-radius: 50%;
transform: rotate(720deg);
}
.logo {
    height: 80px;
margin: 0 auto;
transition: all 1s ease 0s;
width: 80px;
}
.logo img {
border-radius: 15px;
}

i want to load the .logo.animated class when the page is loaded. please share the jquery code for the same.

Answer 1

You can use .addClass() as well as wrapping your code inside $(window).load(function() {...});:

$(window).load(function() {
    $('.logo').addClass('animated');
});

Answer 2

you can do using this

$(document).ready(function(){
$('.logo').addClass('animated');
})

Answer 3

As you have image on your page, you would want to wait for the image to be loaded (otherwise you will see animation even if image is not loaded) - In that case you could use

$(window).load(function(){
  $('.logo').addClass('animated');
});

Answer 4

You can use the below:

either :

$(function() {
$('.logo').addClass('animated');
});

Or:

window.load(function(){
$('.logo').addClass('animated');
})