title: jQuery mouseenter and fadeTo problems
body: <p>I'm doing the codeacademy.com jQuery course to get a nice taste of jQuery before I go through the jQuery In Action book, and I've got to one part and the code doesn't work and I cant see why.<br /><br /></p>
  
  <p>I've created a jsFiddle of it here <a href="http://jsfiddle.net/weacY/" rel="nofollow">http://jsfiddle.net/weacY/</a></p>
  
  <p>These are the instructions from codeacademy.com:</p>
  
  <blockquote>
    <p>Great! Next, let's include our function keyword and two new actions together, mouseenter() and fadeTo().</p>
    
    <p>mouseenter() does what you might expect: it produces a change when your mouse enters a given HTML element. For example,</p>
    
    <p>$(document).ready(function() {
        $('div').mouseenter(function() {
            $('div').hide();
        });
    });
    would hide every  on the page as soon as you mouse over one. (We'll find out how to affect just one  among many in the next lesson.) For now, we only have one , so this setup is okay.</p>
    
    <p>Instead of hide(), however, we'll place fadeTo() inside mouseenter(). fadeTo() takes two arguments, or inputs, between its parentheses, separated by a comma: the speed at which to fade, and the opacity (or transparency) to fade to. For example,</p>
    
    <p>fadeTo('fast', 0.25);
    would quickly fade the target element to 25% of its original opacity, making it very light-colored.</p>
    
    <p>Using the examples above, make it so your 'div' fades to 1 (100%) opacity when your mouse enters the 'div'. Make the animation speed 'fast'. (Make sure to give fadeTo() its inputs in order—speed, then opacity.)</p>
    
    <p>Mouse over your 'div' to see the effect!</p>
  </blockquote>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Button Magic&lt;/title&gt;
    &lt;link rel='stylesheet' type='text/css' href='stylesheet.css'/&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div&gt;&lt;br/&gt;&lt;strong&gt;Click Me!&lt;/strong&gt;&lt;/div&gt;
    &lt;script&gt;type="text/javascript" src="script.js"&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>div {
   height: 60px;
   width: 100px;
   border-radius: 5px;
   background-color: #69D2E7;
   text-align: center;
   color: #FFFFFF;
   font-family: Verdana, Arial, Sans-Serif;
   opacity: 0.5;
  }​
  </code></pre>
  
  <p>And finally the jQuery:</p>
  
  <pre><code>$(document).ready(function() {
   $("div").mouseenter(function() {
    $("div").fadeTo("fast", 1);
   });
  });​
  </code></pre>
  
  <p>Thanks in advance for any help.</p>