Simple jQuery problem that I'd love some help with.

im...LOST

Hi all,

I've a tiny, tiny bit of experience with javascript and jQuery but not an awful lot at all.

Anyway, with the code!

$(document).ready(function(){

$("#mainContainer img").hover(
  function () {
    $("#mainContainer h2").animate({opacity: "1"}, 800);
	  
  }, 
  function () {
 $("#mainContainer h2").animate({opacity: "0"}, 400); 
 		 
 }
);	

<div class="post">
<h2>The Title1 @ Billybobs</h2>
<img src="images/6189293568_a1cfe08616_b.jpg />";
 </div>
<div class="post">
<h2>The Title2 @ BillyBobs</h2>
<img src="images/6189293568_a1cfe08616_b.jpg />";
 </div>

I've two images.
I've made it so the title overlays the image like the image below.


What I'm having trouble with it doing exactly what I want.



**When I'm not hovered, the titles aren't there. (fine can do that with css)

**When the user hovers on an image, I just want that image's title to become visible, not the other one aswell.

I know it's a simple thing but just can't figure it out and it's not the easiest thing to google when I don't know the name of it.

henryporter

Would you not just give the title an id and use that to call jQuery on it eg <h2 id="title1"> and then $("#title1").animate({opacity: "1"}, 800);

Liam Byrne

$(document).ready(function(){

$(",post img").hover(
  function () {
    $(this).parent().find("h2").animate({opacity: "1"}, 800);
	  
  }, 
  function () {
    $(this).parent().find("h2").animate({opacity: "0"}, 400); 
 		 
 }
);

Giblet

.parent().find("h2")

can also be .siblings('h2') (Which pretty much does the same thing anyway :P)

im...LOST

Thanks lads, I really appreciate it!

henryporter wrote: »

Would you not just give the title an id and use that to call jQuery on it eg <h2 id="title1"> and then $("#title1").animate({opacity: "1"}, 800);

I could do that but i actually have like 10 posts per page so that wouldn't be the most efficient thing to do, I'd say. Thanks though!

henryporter

im...LOST wrote: »

Thanks lads, I really appreciate it!




I could do that but i actually have like 10 posts per page so that wouldn't be the most efficient thing to do, I'd say. Thanks though!

True - the other posts had better solutions for that;-)

Liam Byrne

Just spotted a typo on mine - should of course be a dot before post and not a comma

$(".post img").hover(