How do I get JQuery to work?

How do I get JQuery to work?

I am new to JQuery and I am trying to figure out how to get my .mouseenter() and .mouseleave() methods to work. So far I have tried using IE8 and FF, but for some strange reason I can not get my elements to do anything other than remaining static. Here's the code that I have so far:

HTML:
  1. <!Doctype html>
  2. <html>
  3. <head>
  4. <link type="text/css" rel="stylesheet" href="style.css"/>
  5. <script type="text/javascript" src="file:///D:/Documents%20and%20Settings/stsc/My%20Documents/_prac/script.js"></script>
  6. <title>Practice</title>
  7. </head>
  8. <body>
  9. <div id="red"></div>
  10. <div id="yellow"></div>
  11. <div id="green"></div>
  12. </body>
  13. </html>
CSS:
  1. div{
  2. height:100px;
  3. width: 100px;
  4. border-radius: 50px;
  5. }

  7. #red{
  8. background-color: red;
  9. }

  11. #yellow{
  12. background-color: yellow;
  13. }

  15. #green{
  16. background-color: green;
  17. }
JS:
  1. $(document).ready(function(){
  2. $('div').mouseenter(function(){
  3. $(this).animate({
  4. width: '+=10px'
  5. });
  6. });
  7. $('div').mouseleave(function(){
  8. $(this).animate({
  9. width: '-=10px'
  10. });
  11. });
  12. $('div').click(function() {
  13. $(this).toggle(1000);
  14. });
  15. });
This is just a simple example to practice using JQuery. Thanks in advance for the help guys!