如何在鼠标悬停动画上平滑此效果？

发布于 2024-12-03 06:22:11 字数 764 浏览 3 评论 0原文

我有一个 div，它根据鼠标的位置向左和向右设置动画，但它太不稳定了（尤其是在 IE 中）。

我很确定它与 mousemove 函数内部的 .stop() 有关，因此在几秒钟内被调用数百次，但这是我能得到的最好的结果。我希望它是一个干净、连续的动画...

jQuery

$('#videoThumbContainer').mousemove(function(e){

    var offset = $(this).offset(),
    containerWidth = $(this).width(),
    runnerWidth = $('#videoThumbRunner').width(),
    relativeX = e.pageX - offset.left,
    difference = parseInt(containerWidth - runnerWidth),
    position = (relativeX / containerWidth) * difference;

    if (runnerWidth > containerWidth) {

        $('#videoThumbRunner').stop().animate({left: position}, 50, 'linear');
    }
});

演示

http://jsfiddle.net/cbXh5/

原文

I have a div that it animating left and right based on the mouse's position, but it's too jittery (especially in IE).

I'm pretty sure it has something to do with a .stop() being inside the mousemove function, thus being called hundreds of times in seconds, but it's the best I can get it. I want it to be a clean, continuous animation...

jQuery

$('#videoThumbContainer').mousemove(function(e){

    var offset = $(this).offset(),
    containerWidth = $(this).width(),
    runnerWidth = $('#videoThumbRunner').width(),
    relativeX = e.pageX - offset.left,
    difference = parseInt(containerWidth - runnerWidth),
    position = (relativeX / containerWidth) * difference;

    if (runnerWidth > containerWidth) {

        $('#videoThumbRunner').stop().animate({left: position}, 50, 'linear');
    }
});