Member Avatar for chrishea

I'm a PHP guy so I still struggle with Javascript. The answer to this is probably easy.

I need to add some animation effects and I'm experimenting with JQuery animate. The sample routine is set up to run when you click on the Run link. I want to change the routine to run automatically when the page is loaded. Suggestions on what I need to change would be appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chainable Transition Effects</title>

<script type="text/javascript" src="../raxan/plugins/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){


	$(".run").click(function(){
	
		$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
		.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
		.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
		.animate({top: "0"}, "fast")
		.slideUp()
		.slideDown("slow")
		return false;
	
	});

});
</script>

<style type="text/css">
body {
	margin: 20px auto;
	padding: 0;
	width: 580px;
	font: 80%/120% Arial, Helvetica, sans-serif;
}
a {
	font-weight: bold;
	color: #000000;
}
#box {
	background: #6699FF;
	height: 100px;
	width: 100px;
	position: relative;
}
</style>
</head>

<body>

<p><a href="#" class="run">Run</a></p>
<div id="box">
</div>

</body>
</html>
  • 3 Contributors
  • 4 Replies
  • 205 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by phpbeginners
tomato.pgn commented: i was also in search of similar code...thanks for sharing... +1

Recommended Answers

All 4 Replies

Member Avatar for chrishea

This should probably have been titled "Auto-start a script". It's my PHP focus coming through.

Member Avatar for ShawnCplus

Just remove the surrounding click event ie.,

$(".run").click(function(){ ... });
Member Avatar for chrishea

I wasn't able to make it work that way but what did work was to replace the click event with ready as in:

$(".run").ready(function(){  ... });
Member Avatar for phpbeginners

put a comment in
//$(".run").click(function(){
//});

to disable run click.

//$(".run").click(function(){
	
		$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
		.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
		.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
		.animate({top: "0"}, "fast")
		.slideUp()
		.slideDown("slow")
		return false;
	
	//});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.