Adding Javascript functionality to wordpress page section

Adding Javascript functionality to wordpress page section

I made a fiddle to display what I want to do.
http://jsfiddle.net/5bCN6/
var div = $('#move');
var upper = $('#up');
var downer = $('#down');
upper.click(function() {
div.animate( { top: '-100'}, 500);
});
downer.click(function() {
div.animate( { top: '0'}, 500);
});
I want to add the code above to a wordpress page.
I added the 3 divs to a page in wordpress in the text editor in the edit
page section of wordpress so the 3 divs show up on the page when I look at
the site. The problem I am having is that I cannot figure out how to get
the javascript to work. I added it to its own file called java.js and
added it to the bottom of footer.php using this.
<script type="text/javascript" src="<?php bloginfo('template_url');
?>/js/java.js"></script>
again, this did not work.
I somehow feel that by including it like that, the javascript is looking
for those divs in footer.php but it cant find it there because it resides
in a page in the back end (probably in page.php. Any ideas?