如何使用 jQuery 在输入上重新创建 CSS 悬停动画，以便它在 Edge 中工作

Question

我有六到九个 <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.

上恢复

Answer 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>

如何使用 jQuery 在输入上重新创建 CSS 悬停动画，以便它在 Edge 中工作

How to re-create CSS hover animation on an input using jQuery so it works in Edge

html

css

jquery

jquery-hover

microsoft-edge