Uncaught TypeError: $(...).find(...).slideDown/slideUp is not a function

Question

I have a simple image gallery where the figcaption is hidden on each image. Here is the HTML:

<figure>
<img src="gallery/reef2.jpg" width="400" height="285" alt="Another beautiful example of the Great Barrier Reef"/>
<figcaption>Another cracking shot of the reef from Mark. <span>[Photographer: Mark Willams]</span></figcaption>
</figure>

And here is the jQuery for it:

$("figcaption").hide();
$("figure").each(function() {
    $(this).hover(function() {
        $(this).find("figcaption").slideDown('slow');
    }, function() {
        $(this).find("figcaption").slideUp('slow');
    });
});

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:

"Uncaught TypeError: $(...).find(...).slideDown is not a function"

and when I hover away from the image, I get this message:

"Uncaught TypeError: $(...).find(...).slideUp is not a function"

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.

Answer 1

It seems like your code works as written. Are you sure you are including jQuery, and that the version you are including has slideUp and slideDown?

$("figcaption").hide();
$("figure").each(function() {
    $(this).hover(function() {
        $(this).find("figcaption").slideDown('slow');
    }, function() {
        $(this).find("figcaption").slideUp('slow');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
<figcaption>Another cracking shot of the reef from Mark. <span>[Photographer: Mark Willams]</span></figcaption>
</figure>