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.

@epascarello - looks like it's the full library she's using. — Adam, Apr 09 '18 at 17:49
@Adam that is not the OPs code, someone added it.... Half tempted to roll it back since it is not what OP had. — epascarello, Apr 09 '18 at 17:49
You're right, why would someone edit a question with no idea what the OP's actual code is, beyond me. — Adam, Apr 09 '18 at 17:50
@bhansa - you should know better. We need to see OP's original code in question, not something you've added to resolve it. — Adam, Apr 09 '18 at 17:51
Then that is your problem, @BrittanyDanielleSmith, it's likely the Slim version doesn't include the functionality. Try switching to the full jQuery library. — Adam, Apr 09 '18 at 17:52

score 9 · Answer 1 · answered Apr 09 '18 at 17:49

9

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>

answered Apr 09 '18 at 17:49

dave

50,635
4
62
77

1

I am using jquery-3.3.1.slim.min.js. Perhaps that's the issue- I might be using the wrong version of jQuery? – Brittany Danielle Smith Apr 09 '18 at 17:53
7

yeah, just remove `.slim` from it and it should work – dave Apr 09 '18 at 17:54
UPDATE: I changed to jquery-3.3.1.min.js, and it now works as intended! Thank you for pointing this out. – Brittany Danielle Smith Apr 09 '18 at 17:56
2

Not sure why the downvotes on your answer. A user edited the OP's original question to include a library that she never had in her code. This answer is correct. – Adam Apr 09 '18 at 17:56

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

1 Answers1