Executing two functions in the correct sequence
Hello all,
I am a jQuerie newbie. Have spent hours on the net and still unable to fix a problem and now totally confused. I have two jquery functions. Function one has to be executed before function two. When I run the script function two is always executed first. Hope someone is able to assist and wish to thank them in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
$(document).ready(function(){
$(function one() {
$('#img1').css({'position': 'relative', 'top': '10px', 'left': '10px', 'width': '50px', 'height': '50px', 'opacity': '1'});
$('#img1').animate({left: '+=380', top: '+=80'}, { duration: 4000, queue: false});
$('#img1').animate({width: "600px", height: "500px", opacity: "1" }, { duration: 4000, queue: false});
});
});
$(function two() {
$('#img2').css({'position': 'relative', 'top': '80px', 'left': '380px', 'width': '600', 'height': '500'});
$('#img2').animate({left: '+=900', top: '-=10'}, { duration: 1000, queue: false});
$('#img2').animate({width: "50px", height: "50px", opacity: "0" }, { duration: 1000, queue: false});
});
</script>
</head>
<body>
<div><img id="img1" src="images/image 1.gif" /></div>
<div><img id="img2" src="images/image 2.gif" /></div>
</body>
</html>