鼠标悬停时无限移动对象

Posted 2023-05-08

【中文标题】鼠标悬停时无限移动对象

【英文标题】：Infinite move object on mouseover

【发布时间】：2014-08-31 22:55:52

【问题描述】：

我正在尝试创建一个功能，当您将鼠标悬停在一个对象上时，另一个对象开始连续移动，直到您将鼠标移出。由于某种原因，在我的代码中，它在前 10 个像素后停止，就是这样，

http://jsfiddle.net/JoshuaWaheed/7df29/

$("a").mouseover(function()

    $("div").animate(

        "margin-left": "+=" + 10 + "px"

    );

);

我怎样才能让它连续运行，只在鼠标悬停时？

【参考方案1】：

尝试在这里做一个巧妙的递归，

$("a").mouseover(function () 
    stop = false;
    animate()
);

$("a").mouseout(function () 
    stop = true;
    $("div").stop();
);

function animate() 
    if (stop)  return; 
    $("div").animate(
        "margin-left": "+=" + 10 + "px"
    , animate);

DEMO

【讨论】：

您可以使用线性缓动使其更平滑：$("div").animate( "margin-left": "+=10",'fast','linear',animate); -- jsfiddle.net/mblase75/7df29/2

另外，请确保全局 stop 变量不会在您页面的其他任何地方使用。

谢谢，这真的很好:)

【参考方案2】：

不要使用.animate，因为它不是为此而设计的。您可以通过在 setInterval 循环中更改 CSS 来自行移动它：

$("a").mouseover(function () 
    // store the interval ID on the DOM element itself
    $(this).data('tc', setInterval(function () 
        $("div").css(
            "margin-left": "+=1"
        );
    , 20) // milliseconds
    );
);
$("a").mouseout(function () 
    // clear the interval ID
    clearInterval($(this).data('tc'));
);

http://jsfiddle.net/mblase75/5QJTT/

【讨论】：

为什么要这样做？ parseInt($('div').css('margin-left'),10) + 1 当+= 1 做同样的事情？

"动画属性也可以是相对的。如果提供的值带有前导 += 或 -= 字符序列，则目标值是通过从财产的当前价值。” - api.jquery.com/animate

CSS 也是一样。 “从 jQuery 1.6 开始，.css() 接受类似于.animate() 的相对值。相对值是一个以+= 或-= 开头的字符串，用于递增或递减当前值。例如，如果一个元素的padding-left 是10px，.css( "padding-left", "+=15" ) 将导致总的 padding-left 为 25px。” - api.jquery.com/css

很高兴知道。我从来没有意识到他们添加了这一点。更新了答案。

【参考方案3】：

试试这是否可行：

var over = false;
$("a").mouseover(function()

   over = true;
   while(over == true)
   
       $("div").animate(

           "margin-left": "+=" + 10 + "px"

       );
    
);

$("a").mouseout(function()

   over = false;
);

【讨论】：

永远不要在动画中使用while。