Как воссоздать анимацию CSS при наведении на ввод с помощью jQuery, чтобы она работала в Edge
У меня есть от шести до девяти переключателей, которые <input type = "checkbox"> выстроены в ряд. Каждый переключатель анимируется при наведении: ручка скользит вниз, и ручка и дорожка заливаются либо сплошным цветом, либо градиентом. В Edge анимация наведения не срабатывает.
Я недостаточно понимаю jQuery, чтобы знать, с чего начать воссоздание этой анимации с использованием jQuery вместо CSS, чтобы она работала в Edge.
Я не знаю, что мне нужно оставить в коде CSS или что я должен перенести в jQuery.
Я понимаю, что проблема в том, что Edge не любит hover ни на чем, кроме ссылок (по крайней мере, мне так сказали).
Как мне заставить это работать, используя jQuery вместо CSS?
Я просмотрел вопросы других людей и ответы, которые они получили, но все они касаются изображений, ссылок или чего-то простого, а не входных данных. Я собрал codepen с некоторыми комментариями: 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.
Ответы 1
IE, вероятно, не видит, что ваш ввод имеет размер до 0. попробуйте этот подход
.switch {
display: inline-block;
height: 113px;
margin: 10px 23px;
position: relative;
width: 55px;
overflow: hidden;
}
.switch input {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.001;
z-index: 1
}
.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%;
}
<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>@BabyThunderball На данный момент я запускаю только ie11, возможно, вместо этого установите наведение на метку (: фокус все равно будет на вводе), иначе, для отладки, удалите непрозрачность из ввода, чтобы лучше видеть, где он стоит, чтобы настроить размер и положение.
@BabyThunderball я обновил фрагмент, чтобы ввести полную ширину и высоту метки. скажите мне, если это работает лучше. Дело в том, что для срабатывания :hover элементу нужен размер, а не непрозрачность, равная 0/none. это тот момент, о котором вы должны помнить ;)
Спасибо, @G-cyr работает с IE11! Это отлично работает! Я не думал, что смогу сделать это без jQuery! Вы избавили меня от многих хлопот! :)
@ G-cyrrunningIE11 По какой-то причине у вас есть вторая учетная запись только для ответов IE11, а не просто для ответов с вашей обычной учетной записью?
@TylerH о IE11, который скоро устарел, если еще нет, вам лучше запустить подлинный и проверить его дважды, если вы хотите эффективно помочь (иногда я путаюсь с поведением IE8). кроме того, я не возражаю против оценки репутации. Этот аккаунт скоро станет бесполезным
Спасибо, @G-cyr. При таком подходе анимация запускается в Edge, однако эффект получается случайным. Я могу зависнуть за пределами ввода, и он срабатывает (неожиданно). Я могу навести курсор на ввод, и он может сработать, а может и не сработать. И если я наведу курсор прямо на часть ручки (круг), он сработает, но быстро остановится. В середине трека есть место, где он мерцает при наведении. Иногда, когда я навожу курсор на круг, вообще ничего не происходит, пока я не подведу мышь к определенной точке. Мне нужно, чтобы он был плавным и предсказуемым, как в других браузерах. Я использую Browserstack для тестирования на Edge.