停止jquery动画时不悬停

我发布了一个关于动画div的问题，我试图修改它一下。我有一个div，当页面加载时会旋转。当它盘旋时，我想让它停下来。停止jquery动画时不悬停

这里的脚本

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); 
}

来源

2012-05-03 user1104854

SO，有什么问题？ – xbonez

我是否真的需要明确说明悬停时不会停止？ – user1104854

是的，你可以和其他任何细节一起帮助我们来帮助你 – xbonez

使用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

DEMO：http://jsfiddle.net/Uf9qZ/

来源

2012-05-03 19:07:20 VisioN

我打算提出一个全局布尔值，它将在'rotate（）'函数内被检查并且用'hover'切换，但是你的解决方案是更优雅。 +1给你，先生。 – DangerMonkey

工作不正常。当页面加载时，它不会旋转，但是当我将鼠标移到后面并稍微旋转时（也许是5º）。 – user1104854

@ user1104854它在2.3秒内有5％的角度增量。尝试减少时间增量。在答案更新中检查DEMO。 – VisioN

你正在做自己的实现旋转，你将不得不自己处理的管理一样，所以缓存setTimeout对象，并使用clearTimeout你的时候需要停止它

来源

2012-05-03 19:10:25

那么，我可以创建一个触发clearTimeout的函数吗？ – user1104854

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; 
}

FIDDLE

来源

2012-05-03 19:22:03 adeneo

对于'setInterval'变种+1;） – VisioN

谢谢，这个也可以。有什么办法可以慢慢地将“setenral”放下来，然后停止它？从1到2000说，然后停止？ – user1104854

停止jquery动画时不悬停

回答

相关问题