title: (Object object) has no method effect
body: <p>I can't seem to understand what is wrong with the code. 
  I've added jquery and jquery UI still have the :
  [objec object] has no method effect error.</p>
  
  <p>Here is the html code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;title&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
      &lt;link rel="stylesheet" href="stylesheet.css" type="text/css"/&gt;
      &lt;script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript" src = 'script.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id = 'container'&gt;
          &lt;div id ='one' class = 'inside'&gt;1&lt;/div&gt;
          &lt;div id ='two' class = 'inside'&gt;2&lt;/div&gt;
          &lt;div id ='three' class = 'inside'&gt;3&lt;/div&gt;
          &lt;div id ='four'class = 'inside'&gt;4&lt;/div&gt;
          &lt;div id ='five' class = 'inside'&gt;5&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the javascript code :</p>
  
  <pre><code>$(document).ready( function () {
    alert('JQ on');
  
      $('.inside').mouseover(function () {
        $(this).fadeTo(1000,1);
      });
  
      $('.inside').mouseleave(function () {
        $(this).fadeTo(500,0.2);
      })
  
      $('.inside').click(function () {
        $(this).effect('explode');
      })
  })
  </code></pre>
  
  <p>Any ideas?</p>