Cleartimeout multiple settimeout

Question

Как я могу сделать clearTimeout, если у меня есть несколько настроек? Здесь у меня есть код:

var $elie = $(".gear"), degree = 0, timer; 


function rotate() { 

    $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
    $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});      
    $elie.css({ 'transform': 'rotate(' + degree + 'deg)'});      
    timer = setTimeout(function() { 
     ++degree; rotate(); 
     $('.gear').attr('timeout',timer); 
    },25); 
} 

$(".google").hover(function() { 

    clearTimeout($('.gear').attr('timeout')); 


}); 
$(".gear").hover(function() { 
    rotate(); 
}); 

То есть: http://jsfiddle.net/T9YxL/1/ Проблема: Я парить на шестерней один раз, чем парить на Google логотип - все останавливается, как это имеет. Но когда я нахожусь на ролике дважды, мне приходится дважды наводиться на логотип Google и так далее. Как очистить все эти настройки сразу, например, я пару раз висел на передаче?

Я смотрел здесь: clearTimeout on multiple setTimeout , но это не помогло.

Answer 1

timer = setTimeout(function() { 
    ++degree; rotate(); 
    $('.gear').attr('timeout',timer); 
},25); 

должен быть

timer = setTimeout(function() { 
    ++degree; rotate(); 
},25); 
$('.gear').attr('timeout',timer); 

и:

$(".gear").hover(function() { 
    rotate(); 
}); 

должен быть

$(".gear").hover(function() { 
    clearTimeout($('.gear').attr('timeout')); 
    rotate(); 
}); 

fiddle