October 29, 2010

div in front of another resets jQuery hover animation. how to prevent this?

Question by MauF

i have an animate effect applied to 4 divs in order to create a blinds effect: when you hover over the first box it grows , the other 3 shrink and when you “mouseout” all 4 return to 25% of the total height.

i want to insert a nested div inside each box (in front, actually with absolute positioning) in order to present some text and links, but every time the mouse hovers over this new div, the animation resets (the mouseout event runs).

how can i make the nested div invisible to the animation? or include it such way that it is invisible to the animation code but the urls work properly?

the example is here:

jquery problem

all code is inline for this demo.

thanx in advance.

Answer by Starx

Solved, check here

The trick to add the selector $("#one > *")

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!