I don't know your exact set-up (no CSS etc), but the following changes should probably do the trick:
// Replace 'parent.mouseout(...' with:
parent.mouseleave(...
// Replace 'parent.mouseover(...' with:
parent.mouseenter(...
See, also, this SHORT DEMO.
The (possible) cause of the problem
Quoting jQuery's docs regarding .mouseover()
:
"This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times.
In your case, when moving from one image to the next a mouseout event was generated on the image and then bubbled up to the containing li
, causing that unexpected behaviour. Using .mouseenter() and .mouseleave() iseems to be a better alternative !