单击图像时，如何在文本中使用切换淡入文本

Question

我想在单击图像时淡入和输出文本。我是JS的新手，所以谢谢您回答我的问题！

这是我的jsfiddle：http：//jsfiddle.net/gsvfv/

这是我为JS所拥有的：

$(function() {
    $('.block img.info').click(function(e) {
        e.preventDefault();
        $('.caption-background').toggleClass('hidden');
    });
});

HTML：

<div class="block">
<img class="info"/>
<div class="caption-background">
    Hello
</div>

和CSS：

 .info {
    width: 200px;
    height: 100px;
    background-image: 
url("http://ocean.nationalgeographic.com/u/TvyamNb-
BivtNwpvn7Sct0VFDulyAfA9wBcU0gVHVnqC5ghqXjggeitqtJ-
1ZIZ1rmCgor42TXOteIQU/");
}
.caption-background {
    height: 200px;
}
.hidden {
    display: none;
}

Answer 1

您可以使用jQuery fadeToggle方法。

使用以下内容更新您的JavaScript：

$(function() {
    $('.rsABlock img.info').click(function(e) {
        e.preventDefault();
        $('.caption-background').fadeToggle();
    });
});

查看http://api.jquery.com/fadetoggle/