figcaption上的.toggle（）无效

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

您应该在控制台中出错。将slow更改为"slow"。

这是一个字符串。

来自the documentation：

  

持续时间（默认值：400）类型：数字或字符串字符串或数字   确定动画运行的时间。

Answer 2

慢是一个字符串：

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

http://jsfiddle.net/RX5QA/1/

Answer 3

将引号放慢，因为它是一个字符串，它可以工作：

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

Fiddle

Answer 4

您的网页上有多处错误

Check out the fiddle for a working demo

1. slow应为"slow"
2. 您未关闭图片代码
3. 你有一个css类嵌套在另一个
中

供将来参考。浏览器具有可以打印调试信息的JavaScript控制台。您必须知道这一点，因为您正在使用console.log（）。如果您当前的浏览器不打印如下信息：

Uncaught ReferenceError: slow is not defined

我建议你调整你的控制台设置或安装一个四方派对。那里有很多很棒的选择