Javascript 不悬停时停止jquery动画

我之前发布了一个关于

div

动画的问题，我正在尝试对其进行一些修改。我有一个

div

，当页面加载时它会旋转。当在它上面盘旋时，我希望它停下来

这是剧本

rotate(); //the function which rotates the div 
$("#div2").hover(function() {
    $("#div2").stop();
});​

这是我的JS页面

var obj = "div2";
var angle = 0;
var interval = 2323;
increment = 5;

function rotate() {
    $('#' + obj).css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
    setTimeout(rotate, interval);
}​

使用

clearTimeout（）

方法。例如：

var obj = "div2";
var angle = 0;
var interval = 100;
var increment = 5;
var timer = null;

function rotate() {
    $('#' + obj).css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
    timer = setTimeout(rotate, interval);
}

$("#div2").hover(function() {
    clearTimeout(timer);
}, function() {
    rotate();
});

rotate(); //the function which rotates the div​​

演示：

使用

clearTimeout（）

方法。例如：

var obj = "div2";
var angle = 0;
var interval = 100;
var increment = 5;
var timer = null;

function rotate() {
    $('#' + obj).css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
    timer = setTimeout(rotate, interval);
}

$("#div2").hover(function() {
    clearTimeout(timer);
}, function() {
    rotate();
});

rotate(); //the function which rotates the div​​

---

演示：

您正在执行您自己的旋转实现，您还必须自己处理管理，因此缓存

setTimeout

对象，并在需要停止它时使用

cleartimout

您正在执行您自己的旋转实现，您还必须自己处理管理，因此缓存

setTimeout

对象，并在需要停止时使用

cleartimout

var elm = $("#div2"),
    angle = 0,
    interval = 2323,
    increment = 5,
    T = setInterval(rotate, interval);

elm.on({
    mouseenter: function () {
        clearInterval(T);
    },
    mouseleave: function() {
        T = setInterval(rotate, interval);
    }
});

function rotate() {
    elm.css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
    angle += increment;
}​

---

我真的需要明确声明它在悬停时不会停止吗？是的，你需要，以及任何其他有助于我们帮助你的细节。我真的需要明确声明它在悬停时不会停止吗？是的，你需要，除了有助于我们帮助您的任何其他详细信息之外，我还打算提出一个全局布尔值，它将在

rotate（）

函数中进行检查，并使用

悬停切换，但您的解决方案要优雅得多+1给你，先生，不太好用。当页面加载时，它不会旋转，但当我将鼠标移到页面上方并将其返回时，它会稍微旋转（可能是5º）。@user1104854它在2.3秒内有5%的角度增量。尽量减少时间增量。查看答案更新中的演示。你是对的，对不起，我有点匆忙。真不敢相信我居然没注意到时间。有没有办法让动画逐渐变慢而不是立即停止？@user1104854哦，这是一个完全不同的故事：）可能你必须使用另一个
超时来增加间隔，最后清除所有
超时
，但是它会很重。我打算提出一个全局布尔值，它将在
rotate（）
函数中进行检查，并用
悬停切换，但您的解决方案要优雅得多+1给你，先生，不太好用。当页面加载时，它不会旋转，但当我将鼠标移到页面上方并将其返回时，它会稍微旋转（可能是5º）。@user1104854它在2.3秒内有5%的角度增量。尽量减少时间增量。查看答案更新中的演示。你是对的，对不起，我有点匆忙。真不敢相信我居然没注意到时间。有没有什么方法可以让动画逐渐变慢，而不是立即停止？@user1104854哦，这是一个完全不同的故事：）可能你必须使用另一个
超时时间来增加间隔，最后清除所有
超时时间
，但是它会很重。谢谢，这个也可以。有没有办法让setinteral缓慢下降，然后停止？从1点到2000点，然后停下来？谢谢，这个也行。有没有办法让setinteral缓慢下降，然后停止？从1点到2000点，然后停下来？