Question

I’m working on a script that fades in and out both an image and a div I have set behind the image when you hover over the image. I’m having two problems:

1. The fades on the image and div don’t seem to move at the same speed even though I have them set to.

2. I can’t figure out how to get the div’s to only show for the image you hover over. If I could type (“this” div.info) as an object, it would work fine. Is there a way to do that?

I can’t get $(".info",this), $(this).find(".info"), or $(".info", $(this).closest("li")) to work.

---

Result: I have found the solution. I was able to get it to work by using lthibodeaux’s suggestion and using $(".info", $(this).closest("li")) as the object and making all the functions .fadeTo go here for the result:
http://jsfiddle.net/Z5p4K/7/

Edit:

• I found out the image and the div animations really were moving at the same speed, just the image only had it’s z-index set on hover, so if you took your mouse off the image while the animation was running, it would appear to move at a different speed than the div when really the image was behind the div, it only appeared to be moving at different speeds because when the div became invisible you could see the image behind it but when it became opaque, the image was gone (making you think the image became invisible when really the div was in front of the image). This was easily fixed by moving the the z-index property from ul.columns li:hover img to ul.columns li img.

• The div only had a border around it while you hovered over it. This was easily fixed by changing the border properties from ul.columns li:hover .info to ul.columns li .info

Check out the final version here: http://jsfiddle.net/tV9Bw/

This is the final version because I can no longer find any problems with any of the code; everything is optimized, there are no glitches, and it looks great.

Thanks to everyone who answered and to Yi Jiang for editing this post with better formatting. I’m new to this site so I wasn’t sure how to properly format my question.

and a Huge thanks to artyom.stv for fixing the last glitch in the script that I didn’t know how to fix.

Answer 1

You’ve got the general idea. One thing you should know about a selector is that you are able to define a second argument as the scope of the selector, i.e.

$("selectorString", scopeObject)

In your case, make the second argument $(this).closest("li"). It will find the list item containing your image and select .info descendants of that container:

$(".info", $(this).closest("li")).fadeIn(1000);