画像をクリックすると、トグルでテキストをフェードインする方法はありますか？

Question

イメージをクリックすると、テキストをフェードインまたはフェードアウトしたいと思います。私はJSにはかなり新しいので、私の質問に答えてくれてありがとう！ここで

は私のjsfiddleです：http://jsfiddle.net/gSVfV/

は、ここで私はJSのために持っているものです：HTMLの場合

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

：

<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(); 
    }); 
}); 

dancemc15 @http://api.jquery.com/fadetoggle/