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="http://localhost/wpeido/wp-content/uploads/2011/09/image1.jpg" />
<img src="http://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!