使单选按钮的波纹效果与 JS 一起工作

Question

我正在研究 Material Design 单选按钮，并试图使其涟漪效应发挥作用，但我在使用正确的 JavaScript 函数时遇到了问题。

基于 MDL，效果会在 mousedown 时激活（不太确定）并且仍然按住它，而在 mouseup 时它会淡出。我已经有了波纹容器，我想我需要一个动画来淡出它，但现在，我会坚持没有动画的基础。

CSS

.radio-ripple {
  position: absolute;
  top: -11px;
  left: -9px;
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: 2;
}
.radio-ripple.is-active {
  background-color: rgba(0,0,0,0.2);
}

我的完整代码JSFiddle。使用jQuery，会容易很多。

我还是个 JS/jQuery 库的初学者，所以来这里寻求帮助。

谢谢

Answer 1

我做了一个例子：

$(function() {
  $('.radio').mousedown(function(e) {
    $(this).find('span').addClass('is-active').fadeIn('fast');
  }).mouseup(function(e) {
    $(this).find('span').addClass('is-active').fadeOut('fast');
  });
});

.radio {
  position: relative;  
}

.radio-ripple {
  position: absolute;
  top: -13px;
  left: -9px;
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: -1;
}
.radio-ripple.is-active {
  background-color: #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <br/>
  <br/>
  <label class="radio">
    <input type="radio" name="radioActive" />Has ripple
    <span class="radio-ripple 1"></span>
  </label>
  <br/>
  <br/>
  <br/>
  <label class="radio">
    <input type="radio" name="radioActive" />Has also a ripple
    <span class="radio-ripple 2"></span>
  </label>
  <br/>
  <br/>
  <br/>
  <label class="radioButton">
    <input type="radio" name="radioActive" />Ordinary
  </label>
</div>