javascript - .toggle() 在 figcaption 上不起作用

Question

我让我的标题覆盖了我的图像，我想在悬停功能上添加显示。但是我无法让它工作

CSS

figure 
{
    margin: 0;
    position: relative;
    float: left;

    figcaption 
    {
        z-index: 2;
        background-color: #ccc;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }
}

HTML

<figure>
    <a href = "#"><img src = "http://someimage.com/image.png"></a>                  
    <figcaption id="caption" style = "display: none">
        <p> Some caption text </p>
        <a href = '#'>link to author's bio</a>
    </figcaption>
</figure>

最后是我非常简单的 javascript。我知道悬停功能正常工作，因为我的控制台在我进入图形时显示“你好”，在我离开时显示“再见”。没有“完整”的消息。

JQUERY

<script type = "text/javascript">

    $('figure').hover(function ()
    {
        console.log('hello');
        $('figcaption').toggle(slow,function(){ console.log("complete");} );
    },
    function ()
    {
        console.log('goodbye');
        $('figcaption').toggle(slow,function(){ console.log("complete");});
    });

</script>

Answer 1

把引号放慢，因为它是一个字符串，它会起作用:

$('figcaption').toggle("slow",function(){ console.log("complete");} );

Fiddle