未捕获的类型错误：$(...).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 之前，我使用了完美的显示和隐藏。请帮助我了解如何让 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>