호버링을하지 않을 때 jquery 애니메이션을 중지 하시겠습니까?

Question

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

Answer 1

사용 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/

Answer 2

, 당신은뿐만 아니라 관리를 직접 처리해야하기 때문에 setTimeout 객체를 캐시하고 때 clearTimeout를 사용합니다 중지해야 그것을

Answer 3

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