單擊圖像時如何通過切換淡入文本？

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/