title: Simple JQuery effects not working?
body: <p>New to StackOverflow but I have a simple question about jQuery effects. </p>
  
  <p>I'm trying to implement a function that slide toggles a navigation bar when an icon is clicked. However, it doesn't work and I'm not sure why. Thanks in advance!</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="navigation"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" id="navbutton"&gt;&lt;img src="navbutton.png" style="width: 15px"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class="nav"&gt;One&lt;/li&gt;
  &lt;li class="nav"&gt;Two&lt;/li&gt;
  &lt;li class="nav"&gt;Three&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(function() {
      function runEffect() {
        $( "#navigation .nav" ).toggle("slide", 500);
      };
  
      $( "#navbutton" ).click(function() {
        runEffect();
      });
  });
  </code></pre>