webmonkey237 webmonkey237 - 10 months ago 45
Javascript Question

Panels with expanding text, expanding issue

The following script shows/expands some text which works fine if you hover over the top and bottom in the black space, the issue is if you hover over the area where the text appears you get a strange jumping effect like its closing quickly and then re-opening.


$(document).ready(function () {
$(".eaRes").mouseover(function () {
$(".eaRes").mouseout(function () {


You want to be using mouseenter instead of mouseover, and mouseleave instead of mouseout.

The mouseover and mouseout events will trigger any time child elements are entered or exited in addition to the parent. This means the event are being triggered more often than you think, causing the strange "jumping" behaviour.

To contrast, mouseenter and mouseleave will trigger only when the parent element is entered or exited.

Here is a fork of your fiddle with the change.