I have anywhere from six to nine switches that are <input type="checkbox"> lined up in a row. Each switch animates on hover: the knob slides down and both the knob and the track fill with either a solid color or a gradient. In Edge, the hover animation doesn't fire.
I don't understand jQuery enough to know where to begin in re-creating this animation using jQuery instead of CSS so that it works in Edge.
I don't know what I need to leave in the CSS code or what I should move to jQuery.
I understand that the issue is that Edge doesn't like hover on anything but links (at least that's what I've been told).
How do I get this working using jQuery instead of CSS?
I've looked at other people questions and the answers they've received but they all deal with images or links or something simple, not inputs. I've put together a codepen with some comments: https://codepen.io/akajezebel/pen/PrQoJe
The 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>
The 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%;
}
The jQuery that I'm using as a guide to see if I can figure this out, but that I don't understand. I borrowed this from 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");
});
I expect the switches to work like they do in CSS but using jQuery instead. I want the knob to slide down and fill with a gradient and the track to fill with a solid color on hover/mouseenter and to revert on mouseout.
IE probably doesn't see your input being size down to 0. try this approach
.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>