webmonkey237 webmonkey237 - 1 year ago 79
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 () {

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download