title: Uncaught TypeError: $(...).find(...).slideDown/slideUp is not a function
body: <p>I have a simple image gallery where the figcaption is hidden on each image.  Here is the HTML:</p>
  
  <pre><code>&lt;figure&gt;
  &lt;img src="gallery/reef2.jpg" width="400" height="285" alt="Another beautiful example of the Great Barrier Reef"/&gt;
  &lt;figcaption&gt;Another cracking shot of the reef from Mark. &lt;span&gt;[Photographer: Mark Willams]&lt;/span&gt;&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>And here is the jQuery for it:</p>
  
  <pre><code>$("figcaption").hide();
  $("figure").each(function() {
      $(this).hover(function() {
          $(this).find("figcaption").slideDown('slow');
      }, function() {
          $(this).find("figcaption").slideUp('slow');
      });
  });
  </code></pre>
  
  <p>Unfortunately, when I hover over and away from the image nothing happens.  When I open Chrome's developer tools, I can see that on hover I get this message:</p>
  
  <p>"Uncaught TypeError: $(...).find(...).slideDown is not a function"</p>
  
  <p>and when I hover away from the image, I get this message:</p>
  
  <p>"Uncaught TypeError: $(...).find(...).slideUp is not a function"</p>
  
  <p>I am not sure why slideDown and slideUp are not working as they should since the figcaption is hidden.  Before using slideDown and slideUp, I was using show and hide which worked perfectly.  Please help me understand how I can get slideDown and SlideUp working properly.</p>