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

im...LOST · 20-10-2011 03:30PM #1

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.
428481865-913385ff1c4b1cb4c9556e9366daf6bb.4ea03068-scaled.png

428481865-913385ff1c4b1cb4c9556e9366daf6bb.4ea03068-scaled.png

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 · 20-10-2011 06:30PM

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 · 20-10-2011 06:38PM

$(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 · 20-10-2011 07:11PM

.parent().find("h2")

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

im...LOST · 21-10-2011 11:45AM

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 · 21-10-2011 01:15PM

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 · 23-10-2011 02:37AM

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

$(".post img").hover(

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

Comments