Добрый день уважаемые. Подскажите, пожалуйста, почему мой метод 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градусов когда курсор не в объекте?