CODEWITHSUNDEEP
jquerycss
Aessandro
Aessandro

Reputation: 5761

CSS transition on page load with jQuery

The following works very well, http://jsfiddle.net/pDERw/199/, how can I make this happen on page load, at the moment it works hover state 

div:hover{do something}

Upvotes: 1

Views: 2239

Answers (3)

chridam
chridam

Reputation: 103305

You could create a hack like this 

<body>
    <div class="onLoad"><br /></div>
</body>

and replace the style div :hover{ ... } with

.onLoad
{
    -webkit-animation: 'zoom' 3s;
    width: 392px;
    height: 285px; 
    right:300px; 
    opacity:0.9; 
}

DEMO: http://jsfiddle.net/chridam/pDERw/201/

Upvotes: 2

SamHuckaby
SamHuckaby

Reputation: 1162

My solution would be to make the div:hover into a completely new class like .animated_load and then use jQuery to assign your div the class on page load like so:

$(document).ready($('#div_id').addClass('animated_load'));

Upvotes: 0

CodePB
CodePB

Reputation: 1756

It depends which you want, but you can just put your code inside:

$(document).ready(function(){ //your code here });

or possibly:

$(window).load(function(){ //your code here });

The first will execute on DOMready (when all your elements are loaded in the DOM), the second will execute when all images etc. have rendered.

Seeing your example, the best way to do this is probably to add your css for the div:hover state to a class instead, and add the class to the element on the load event. The following is an example of this:

http://jsfiddle.net/pDERw/200/

Upvotes: 2

Related Questions