Use the hoverIntent plugin.
Using mousemove fires far too many events for your animation to handle
- the instant the mouse moves onto a span, an event fires and the
underbar tries to move; move the mouse by 1px and the event fires
again, trying to move the underbar; etc, etc.
If you were to start with your cursor off the far left of the spans,
then move it across all the spans until it goes off the far right, an
event will be fired for every pixel (if not more) covered in that
journey. Each event gets queued, and for each event you have a 'slow'
animation, which most of the time will not do anything during that
animation period because the underbar does not need to move.
If you try this instead, you should notice the difference...
var d = $('div').width($('span:first').width());
$('span').each(function(){
var t = $(this)
, o = { width: t.width()
, marginLeft: t.offset().left};
t.mouseover(function(){ d.animate(o ,'slow'); });
});
But, if you switch fast between spans, the underbar still plays catch-
up (even if you were to ramp the speed up a bit) because of the
successive queuing of animations - which is where the hoverIntent
plugin could help you.
HTH
On Oct 31, 8:32 am, Cloudream <[EMAIL PROTECTED]> wrote:
> http://labs.cloudream.name/jquery/move.html
>
> executes slowly in every browser i tested,IE7/FF2/OP9/SA3...
>
> any error in my code?
