Geek Answers Handbook

Can I add more after "this" in jQuery?

I am working on a script that disappears and displays the image and div that I set behind the image when you hover over the image. I have two problems:

  • The fades in the image and div do not seem to move at the same speed, even if I set them.

  • I cannot figure out how to make the div show only the image you are hovering over. If I could enter ("this" div.info) as an object, it would work fine. Is there any way to do this?

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

Result: I found a solution. I managed to get it to work using the lthibodeaux clause and using $(".info", $(this).closest("li")) as an object and doing all the .fadeTo functions to get the result: http://jsfiddle.net / Z5p4K / 7 /

Edit:

  • I recognized the image, and the div animation really moved at the same speed, only the image only established that the z-index was set to freeze, so if you removed the mouse from the image during the animation, it would seem to move at a different speed than div, when in fact the image was behind the div, it only seemed to move at different speeds, because when the div became invisible, you could see the image behind it, but when it became opaque, the image disappeared (making you think that the image became invisible when the div was actually in front of the image). This was easily fixed by moving the z-index property from ul.columns li:hover img to ul.columns li img .

  • The div only has a border around it when you hover 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 code; everything is optimized, there are no glitches, and it looks great.

Thanks to everyone who replied and Yi Jiang for editing this post with better formatting. I am new to this site, so I was not sure how to format my question correctly.

and many thanks to artyom.stv for fixing the last crash in the script, which I did not know how to fix.

+4
source share
3 answers

You have a general idea. One thing you should know about the selector is that you can define the 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 the .info descendants of this container:

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

Change $(".info") to $(this).find(".info") and everything will be nice.

+1
source

Yes, you can use something like $(this).find(".info") , as mentioned by Bundy

but since the jQuery constructor takes a second parameter that can be used to override the selection context. You can also do something like this:

 $(".info",this)
0
source

More articles:


All Articles