Javascript-форум - jQuery метод hover()

Добрый день уважаемые. Подскажите, пожалуйста, почему мой метод hover() работает не адекватно, и как его поправить?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Preloader</title>
	<style type="text/css">
.circle {
position: relative;
width: 76px;
height: 76px;
border-bottom: 1px solid #d7d7d5;
border-radius: 50%;
background-color: #E1E1E1;
opacity: .9;
z-index: 1;
}

.innerArcOrange{
   width: 74px;
   height: 74px;
   border-radius: 50%;
   background: linear-gradient(to top, #FF7D00 5%,  #FB7E01 50%, #FC5200 51%, #FC5101);
	overflow: hidden;
	opacity: .99;
	z-index: 6;
}

.hid {	
	margin-left: 40px;
	margin-top: -15px;
	width: 50px;
	height: 50px;
	transform-origin: left bottom; 
	perspective: 34px;
	transform: rotate(45deg);
	background-color: white;
 	z-index: -1;
}


	</style>
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="circle">	
	<div class="innerArcOrange">
		<div class="hid"></div>
	</div>
</div>	
<script type="text/javascript">
	window.onload = function () { 

	console.log("Evresing good");
	var $circle= $('.circle'),
		  $firstArc =$('.hid');
 $circle.hover( function(){
 	console.log("IN");

		rotate(45);
       function rotate(degree) {
           // For webkit browsers: e.g. Chrome
          $firstArc.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
           // For Mozilla browser: e.g. Firefox
          $firstArc.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
           setTimeout(function() { rotate(degree + 10); }, 60);  
       }
;}, 

 	function(){
 	console.log("OUT");	
    $firstArc.css({ WebkitTransform: 'rotate(' + 45 + 'deg)'});
 	$firstArc.css({ '-moz-transform': 'rotate(' + 45 + 'deg)'});
 });  
}
</script>
</body>
</html>

Я хочу что б при выходи курсора из объекта мой элемент $firstArc плавно возвращался в его начальные 45град. При этом, если на текущем этапе угол <180 +количество оборотов 2Pi он это б делал против часовой стрелки, а если >=180 +количество оборотов 2Pi то за часовой стрелкой
Ещё вопрос, как правильно поставить break? что б оно мне не прибавляло +10градусов когда курсор не в объекте?