I have an image in a html document and when the webpage loads i want the image to bounce. I have a jquery function that does this only when the image is clicked on. I can't figure out how to make this work onLoad...
Here is the code
<!DOCTYPE html>
<html>
<head>
<link href=".8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src=".5/jquery.min.js"></script>
<script src=".8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin-left: 500px; margin-top: 200px; width: 100px; height: 80px; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#logo").click(function () {
$(this).effect("bounce", { times:4, distance:200 }, 400);
});
});
</script>
</head>
<body>
<div id="logo"><img src=".jpg"/> </div>
</body>
</html>
Thanks for checking this out. Much appreciated! :)
I have an image in a html document and when the webpage loads i want the image to bounce. I have a jquery function that does this only when the image is clicked on. I can't figure out how to make this work onLoad...
Here is the code
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis./ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin-left: 500px; margin-top: 200px; width: 100px; height: 80px; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#logo").click(function () {
$(this).effect("bounce", { times:4, distance:200 }, 400);
});
});
</script>
</head>
<body>
<div id="logo"><img src="http://visionhelp.files.wordpress./2012/01/soccer-ball.jpg"/> </div>
</body>
</html>
Thanks for checking this out. Much appreciated! :)
Share Improve this question asked Jan 27, 2012 at 21:59 user1163073user1163073 3177 silver badges20 bronze badges3 Answers
Reset to default 2$(document).ready(function () {
$("#logo").effect("bounce", { times:4, distance:200 }, 400);
});
or, using a more modern style of document ready function:
$(function () {
$("#logo").effect("bounce", { times:4, distance:200 }, 400);
});
This work for you:
$(window).load(function() {
$('#logo').effect("bounce", {
times: 4,
distance: 200
}, 400).click(function() {
$(this).effect("bounce", {
times: 4,
distance: 200
}, 400);
});
})
With a jsFiddle example
Just trigger the click event on page load. Try this
$(document).ready(function() {
$("#logo").click(function () {
$(this).effect("bounce", { times:4, distance:200 }, 400);
})
.click();//Will trigger the click event on page load
});
If you don't want this effect on logo click but just on page load then use this.
$(document).ready(function() {
$(this).effect("bounce", { times:4, distance:200 }, 400);
});