JQuery in page – help please

Hi all,

I tried searching for a similar thread but couldnt come accross anything that helped so I apologise if this has been answered before.

What I am trying to do is run a simple JQuery script within a WP page. It simply slides one image down to reveal one behind it. Currently the images show in the correct place in the correct order (so css is fine) but no animation happens.

I have the script running fine on it own page but nothing happens when I copy it into WP.

Heres my HTML:

<div class="imageswapwrap">
	<img src="https://localhost/wpeido/wp-content/uploads/2011/09/image1.jpg" />
    	<img src="https://localhost/wpeido/wp-content/uploads/2011/09/image2.jpg" class="frontimage" />
	</div>

And my JQuery SCript which is on its own file:

$(function(){
	$('.imageswapwrap').hover(function() {
		$(this).children('.frontimage').stop().animate({"top" : "300px"}, 700);
	}, function(){
		$(this).children('.frontimage').stop().animate({"top" : "0px"}, 400);
		});
});

And in my header I have:

<script language="JavaScript" SRC="<?php echo bloginfo('template_directory') ?>scripts/jQuery-1.6.3.pack.js"></script>
<script src="<?php echo bloginfo('template_directory') ?>scripts/imageswapscript.js" type="text/javascript"></script>

(note: I am calling my own JQuery library as well as the built in wp one).

Any help would be much appreciated! Thanks heaps!