OK, you’re mixing a lot of things up here. First of all you need to understand what jQuery is and why and when to use it. Having no idea about the tools you are using doesn’t help you achieve what you intend. The
documentation gives a good start.
Now, when you use jQuery you don’t need any
<body onload="…"> crap. If you already include that much overhead code (even in its minfied form jQuery is still 32KB of code) with a lot of prefabricated functionality to ease development why not use it then? Put all your functions into the “document ready” function of jQuery and there you go. And by the way: A shorthand way to write
$(document).ready(function() {…}); is to just write
$(function() {…});; it does the same.
Then, you are doing it much more complicated than you need to. You have jQuery, remember? You can and should use the callback functions
animate() provides to run functions recursively. Then, jQuery also has the
stop() function to stop animations at any time.
Something like this:
Code:
<div id="example"></div>
<div id="stop">stop it!</div>
Code:
#example {
width: 100px;
height: 100px;
border: 1px solid red;
}
#stop {
width: 50px;
background-color: lime;
position: absolute;
top: 150px;
}
PHP Code:
$(function() {
var forth = function() {
$('#example').animate({
'margin-top': '+=10px',
'margin-left': '+=10px',
width: '80px',
height: '80px'
},
{
duration: 500,
complete: back
});
}
var back = function() {
$('#example').animate({
'margin-top': '-=10px',
'margin-left': '-=10px',
width: '100px',
height: '100px'
},
{
duration: 500,
complete: forth
});
}
forth();
$('#stop').click(function() {
$('#example').stop();
});
});