jQuery 鼠标移动动画

发布于 2024-09-25 08:36:16 字数 942 浏览 1 评论 0原文

我将 mousemove 事件处理程序与 jQuery 结合使用：

$(document).mousemove(function(e) { updateDownloadPosition(e); } );

它在 Chrome 中工作得很好，但我尝试过的所有其他浏览器直到鼠标停止移动才会触发 mousemove 事件，而不是每次移动时都会触发。

--编辑--

好的，正如 Tim Down 正确指出的那样，这不是 mousemove 事件，而是我的函数，所以现在我的重点是我的动画函数：

paralaxArray[i].object.animate(
            {marginLeft: newX},
            {duration: 3000,
            easing: 'easeOutExpo'});

为了让它正确重置mousemove 我正在使用 stop() 函数：

paralaxArray[i].object.stop().animate(

...但这会在 chrome 中产生断断续续的动画，所以现在我使用clearQueue：

paralaxArray[i].object.clearQueue();
paralaxArray[i].object.animate(
            {marginLeft: newX},
            {duration: 3000,
            easing: 'easeOutExpo'});

但是这样做（并使用 stop() ）会导致除 chrome 之外的所有浏览器仅动画一次鼠标已停止移动。这可能是什么原因造成的？我必须编写自己的动画更新函数吗？

再次感谢:)

谢谢

原文

I'm using the mousemove event handler with jQuery:

$(document).mousemove(function(e) { updateDownloadPosition(e); } );

It works perfectly in Chrome but every other browser I've tried the mousemove event isn't fired until the mouse stops moving, instead of constantly every time it moves.

--EDIT--

Ok so as Tim Down rightly pointed out, its not the mousemove event, its my function, so now my focus is on my animation function:

paralaxArray[i].object.animate(
            {marginLeft: newX},
            {duration: 3000,
            easing: 'easeOutExpo'});

In order to get this to reset properly on mousemove I was using the stop() function:

paralaxArray[i].object.stop().animate(

...but this produces choppy animation in chrome so now I'm using clearQueue:

paralaxArray[i].object.clearQueue();
paralaxArray[i].object.animate(
            {marginLeft: newX},
            {duration: 3000,
            easing: 'easeOutExpo'});

But doing it this way (and with stop() ) causes all browsers other than chrome to only animate once the mouse has stopped moving. What could be causing this?? Am I going to have to write my own animation update function?

Thanks again :)

Thanks

分享到QQ

分享到微博