停止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動畫時不懸停

回答

相關問題