ラジオボタンのリップルエフェクトをJSと連携させる

Question

素材デザインのラジオボタンで作業していて、リップル効果を働かせようとしていますが、適切なJavaScript関数に問題があります。

MDLに基づいて、効果はマウスの下で（実際にはわかりませんが）、それを保持している間にアクティブになり、マウスアップするとフェードアウトします。私はすでにリップルコンテナを持っており、フェードアウトするアニメーションが必要になると思いますが、今はアニメーションを持たない基本に固執します。

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>