鼠标悬停时无限移动对象答案

【问题标题】：Infinite move object on mouseover鼠标悬停时无限移动对象
【发布时间】：2014-08-31 22:55:52
【问题描述】：

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

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

    $("div").animate({

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

    });

});

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

【问题讨论】：

标签： javascript jquery hover mouseover move

【解决方案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。