Wie kann ich Text mit Toggle einblenden, wenn ich auf ein Bild klicke?

Question

Ich möchte Text ein- und ausblenden, wenn Sie auf ein Bild klicken. Ich bin ziemlich neu in JS, also danke, dass du meine Frage beantwortet hast!

Hier ist meine jsfiddle: http://jsfiddle.net/gSVfV/

Hier ist, was ich für JS haben:

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

Für HTML:

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

Und für 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

Sie können die Methode jQuery fadeToggle verwenden.

Aktualisieren Sie Javascript, mit den folgenden:

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

Check out http://api.jquery.com/fadetoggle/