Question

我正在研究材料设计单选按钮，并试图使其涟漪效果正常工作，但我遇到了正确的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

我举了一个例子：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

使单选按钮的连锁效果与JS一起使用

1 个答案: