jquery - 如何停止 css/jquery 旋转

Question

我有一个功能，可以在单击元素后使齿轮在页面上旋转，我在网上找到了代码并进行了一些编辑以使其与我需要的兼容，但是我不知道如何使其运行在计时器上(也许 2 秒？)。谁能帮我一下吗？

$(".go1").click(function() {
    var $spin = $(".gear1"), degree = 0, timer;
    rotate();
    function rotate() {

        $spin.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
    timer = 2000,setTimeout(function() {
            ++degree; rotate();
        },50);

    }


});

http://jsfiddle.net/Y2tjX/

这就是它的样子，尽管 jsfiddle 不起作用(也许我没有输入足够的代码)，但在整个实际文件中，当单击 go1 时齿轮会根据需要旋转，但不会停止旋转

Answer 1

从 roXon fork :http://jsfiddle.net/HWfMt/

关键是每次单击 2 秒后停止递归 setTimeout() 调用。

var degree = 0;
var timer=30;
var $spin = $(".gear1");
var to;

$(".go1").click(function() {
    rotate();
     setTimeout(function(){
     clearTimeout(to);
 },2000);

});

function rotate() {
    degree++;
    $spin.css({ 'WebkitTransform': 'rotate(' + degree + 'deg)'});  
    $spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
    to = setTimeout(function() {
        rotate();
    }, timer);
}