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}
Add a comment
|
3 Answers
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;
}
Comments
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:
Comments
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'));
