Hi, I've written a simple image rollover script using jQuery. The script enhances my site's navigation bar: for each image/link, on 'mouseover', it fades in a corresponding image in the middle of the bar; and on 'mouseout', it fades out the corresponding image, and restores a default image (a 'star' image) in the middle of the bar.
Demo of the script: http://basement.greenash.net.au/jquery-rollover-example/ Source code: http://basement.greenash.net.au/jquery-rollover-example/js/jq-rollover.js As you can see from trying out the demo, the problem is that when you roll over multiple images in quick succession, and then move the mouse away, the fadeIn/fadeOut effects seem to 'pile up' in a big queue. The result of this pileup is that the 'star' image ends up fading in and out multiple times, which is not the intended effect at all. Does anyone have a solution to this problem? Is there any way to cancel all queued or running fade effects when a new fade effect fires? If possible, I would rather take the approach of cancelling all queued effects, than checking for queued effects and stopping a new effect from firing. I.e. I don't want this: function() { if (!(fade effects running or in queue)) { fire new fade effect; } } But I do want this: function() { if (fade effects running or in queue) { abort running effects; empty queue; } fire new fade effect; } Any help would be appreciated. If I can iron out this annoyance, I would like to contribute this script as a plugin. If it can't be fixed, I'll have to just replace the fadeIn/fadeOut calls with hide/show calls (which don't suffer from the pileup issue). Thanks, Jaza - www.greenash.net.au _______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
