У меня есть от шести до девяти переключателей, которые <input type="checkbox"> выстроены в ряд.Каждый переключатель анимируется при наведении: ручка сдвигается вниз, и ручка и дорожка заполняются либо сплошным цветом, либо градиентом.В Edge анимация при наведении мыши не запускается.
Я недостаточно разбираюсь в jQuery, чтобы знать, с чего начать создание этой анимации с использованием jQuery вместо CSS, чтобы она работала в Edge.
Я не знаю, что мне нужно оставить в коде CSS или что мне следует перенести в jQuery.
Я понимаю, что проблема в том, что Edge не нравится hover ни на чем, кроме ссылок(по крайней мере, это то, что мне сказали).
Как мне заставить это работать, используя jQuery вместо CSS?
Я смотрел на вопросы других людей и ответы на нихполучил, но все они имеют дело с изображениями или ссылками или чем-то простым, а не входными данными.Я собрал кодовую ручку с некоторыми комментариями: https://codepen.io/akajezebel/pen/PrQoJe
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<div class="switch-row">
<label class="switch">
<a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer">
<input class="knob" type="checkbox">
<span class="slider round"></span>
</a>
</label>
</div>
<div class="switch-row">
<label class="switch">
<a href="https://www.twitter.com/" target="_blank" rel="noopener noreferrer">
<input class="knob" type="checkbox">
<span class="slider round"></span>
</a>
</label>
</div>
</body>
</html>
CSS:
.switch {
display: inline-block;
height: 113px;
margin: 10px 23px;
position: relative;
width: 55px;
}
.switch input {
height: 0;
opacity: 0;
width: 0;
}
.slider {
border: 1px solid #cc80ff;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider::before {
border: 1px solid #cc80ff;
bottom: 60px;
content: "";
height: 43px;
left: 5px;
position: absolute;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
transition: 0.4s;
width: 43px;
}
input:hover + .slider {
background-color: #cc80ff;
background-color: rgba(204, 128, 255, 0.8);
}
input:focus + .slider {
box-shadow: 0 0 1px #cc80ff;
}
input:hover + .slider::before {
background-image: -moz-linear-gradient(bottom right, #cc80ff, #e4d8cb, #cc80ff);
background-image: -ms-linear-gradient(bottom right, #cc80ff, #e4d8cb, #cc80ff);
background-image: -o-linear-gradient(bottom right, #cc80ff, #e4d8cb, #cc80ff);
background-image: -webkit-linear-gradient(bottom right, #cc80ff, #e4d8cb, #cc80ff);
background-image: linear-gradient(to bottom right, #cc80ff, #e4d8cb, #cc80ff);
-moz-transform: translateY(54px);
-ms-transform: translateY(54px);
-o-transform: translateY(54px);
-webkit-transform: translateY(54px);
transform: translateY(54px);
}
/* ----- Rounded sliders ----- */
.slider.round {
border-radius: 34px;
}
.slider.round::before {
border-radius: 50%;
}
JQuery, который яиспользовать в качестве руководства, чтобы увидеть, могу ли я понять это, но это я не понимаю.Я позаимствовал это у http://jsfiddle.net/q61n8gxv/2/:
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend(jQuery.easing, {
easeOutBounce: function(x, t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b
}
}
});
//This bit I understand, but I don't know how this works with CSS or the above.
$('.slider').hover(function() {
$(this).stop().animate({
top: -50
},900, "easeOut");
}, function() {
$(this).stop().animate({
top: 0
}, 900, "easeOut");
});
Я ожидаю, что переключатели будут работать так же, как они работают в CSS, но вместо этого используют jQuery.Я хочу, чтобы ручка скользила вниз и заполнялась градиентом, а дорожка заливалась сплошным цветом на hover / mouseenter и возвращалась на mouseout.
.