未捕获的类型错误：$(...).find(...).slideDown/slideUp 不是函数 [重复]

Question

我有一个简单的图片库，其中每张图片上都隐藏了 figcaption。这是 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>

这里是它的 jQuery：

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

不幸的是，当我将鼠标悬停在图像上并远离图像时，什么也没有发生。当我打开 Chrome 的开发者工具时，我可以看到悬停时收到以下消息：

“未捕获的类型错误：$(...).find(...).slideDown 不是函数”

当我将鼠标悬停在图像之外时，我会收到以下消息：

“未捕获的类型错误：$(...).find(...).slideUp 不是函数”

我不确定为什么 slideDown 和 slideUp 不能正常工作，因为 figcaption 是隐藏的。在使用 slideDown 和 slideUp 之前，我使用的是 show 和 hide，效果很好。请帮助我了解如何让 slideDown 和 SlideUp 正常工作。

Answer 1

您的代码似乎按照编写的方式工作。您确定要包含 jQuery，并且您要包含的版本有 slideUp 和 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>