Jquery animation entering page

StackOverflow https://stackoverflow.com/questions/22132178

Question

I'm a newbie with jquery and I'm trying to code a very simple animation. I've already coded the div movement but I would like the animation to start automatically when entering the page without clicking or hovering anything.

So this is the code 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
$("p").hover(function(){
$("#div02").animate({left:'150px'});
});
$("p").hover(function(){
$("#div01").animate({left:'180px'});
});
});
</script> 

<style>
#div02{background:url(norahalf.png) no-repeat; background-  size:contain;height:100px;width:100px;position:absolute;}

#div01{background:url(rinohalf.png) no-repeat; background-size:contain;height:100px;width:100px;position:absolute; left:500px}
</style>
</head>

<body>
<p>something something dark side</p>
<div id="div02"><img src="pixeltransp.gif" width="100%" height="100%" alt="rino" title="rino"></div>
<div id="div01"><img src="pixeltransp.gif" width="100%" height="100%" alt="nora" title="nora"></div>

Any help would be greatly appreciated!

Nora

Was it helpful?

Solution

Try not having the animate function executed after hovering the paragraph, then:

$(document).ready(function(){
    $("#div02").animate({left:'150px'});
    $("#div01").animate({left:'180px'});
}

OTHER TIPS

To start automatically you just need to trigger mouseover event on page load:

$(function() {
    $("p").hover(function() {
        $("#div02").animate({ left: '150px' });
        $("#div01").animate({ left: '180px' });
    })
    .trigger('mouseover');
});

I'm not sure if you still need this p hover event at all though.

Demo: http://jsfiddle.net/rDMGC/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top