0

I'm currently animating my first website, found here: http://jsfiddle.net/thevenin/zRLFX/4/

Summary: I have five divs that are animated recursively, with a $.each() function to start the animations. If you hover over any of the five divs, the animation is supposed to break and all of the divs are supposed to stop moving. The animation restarts with the $.each() function when you unhover the div.

My issue is that sometime the hover() function doesn't fire off when the divs reach a diagonal axis to the interior circle. If you trace the mouse over a div in this position, the mouse will hover over the div without being registered. Both Firefox and Chrome have this issue. How can I fix this?

Thanks!

sophistry
  • 117
  • 1
  • 2
  • 12

2 Answers2

2

Hovering requires that you actually move the mouse over the hovered object. Because your objects are animated, if you just leave the mouse stationary in the objects' path, the hover will not trigger.

I suspect that this also occurs if you move your mouse towards a circle, but stop the mouse just before it reaches the circle, then the circle animates underneath it, not triggering the hover.

To circumvent this behavior, you could instead poll the mouse coordinates to see if they are within the range of where a circle is at any given time.

jeffjenx
  • 17,041
  • 6
  • 57
  • 99
  • I believe there is another scenario that the poster means. Try entering one of the divs while they are on a diagonal axis to the center of the purple div. The hover will be ignored. I believe this is the asker's real concern. Whilst tracing the divs will suddenly result in a proper detection. But I do like your suggestion of tracking the mouse coordinates. – Kiruse Aug 08 '12 at 19:59
  • @Derija93 Thanks for pointing out that this occurs along diagonal axes. How would you poll the mouse coordinates with relation to the circle position? – sophistry Aug 08 '12 at 20:03
  • While jQuery has the simple mouseMove event, you can check the pageX/clientX as [described here](http://stackoverflow.com/a/3011466/1028949). My thinking is, whenever the mouse is moved or some other frequency, update an array containing your circle positions, then compare the two. – jeffjenx Aug 08 '12 at 20:08
  • @Rocketeer It wouldn't be all that easy. And of course it is not possible to draw the mouse coordinates relative to the circles but to the document origin. Then you'd have to check whether the mouse is within one of those circles using maybe a mathematical formula. But to save performance, I'd recommend checking if the mouse is somewhere close to one of those circles and afterwards calculate whether it is within a circular shaped range. – Kiruse Aug 08 '12 at 20:09
  • Walking through this: First find absolute positions of all circles and mouse cursor, then use math to figure out if the cursor is within a circle. Is that correct? Also, what causes this hover problem in the first place? – sophistry Aug 08 '12 at 20:19
2

Solved it by increasing the z-index of the circles. I guess earlier, the problem would arise from the divs being the same z-index as everything else, meaning you wouldn't be able to select them. Not too sure as to the actual reasoning, but at least it works out!

sophistry
  • 117
  • 1
  • 2
  • 12
  • Great! I didn't think of that. Of course, the "bounding box" of the purple circle intersects with the "bounding areas" of your navigational circles. I should have noticed that. – Kiruse Aug 08 '12 at 21:18