The jQuery Flicker

So, I’ve been doing a lot of jQuery work recently and one thing that got me recently was random flickering. I would make an element fade in and out on hover, but when that element was faded in and I hovered over it, it would fade in and out really quickly. This had me baffled for a while. On a very basic level, the code looked something like this (link to JSBin)

If you hover over the red box, you will see a paragraph appear. Now, if you put your mouse on that paragraph, you’ll see the flickering problem.

Why is this?

It’s because you are showing/hiding an element when its sibling is hovered over. Make it appear when the parent is hovered, and no problems.

Hope this helps!