我试图在Click或Tap上运行这个jQuery监听器来运行一个函数。目前它在点击上工作正常,但是当在手机上点击时,涟漪效应目前不想运行?
是否有更好的替代'。('点按')'或者我只是错误地使用它,如果是这样,我做错了什么?
下面是具有涟漪效果的按钮的代码。
$( '.hvr-ripple-out' ).click(function() {
$(this).toggleClass( 'fill' );
});
$( '.hvr-ripple-out' ).on( 'click tap', function() {
var el = $(this),
newone = el.clone(true);
el.before(newone);
el.remove();
newone.addClass( 'fill' );
});
.hvr-ripple-out {
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
color: #333;
text-align: center;
border: 1px solid #333;
border-radius: 50%;
}
.hvr-ripple-out:hover {
color: #39CCCC;
border-color: #39CCCC;
}
@-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
.hvr-ripple-out:before {
content: '';
position: absolute;
border: rgba(0, 0, 0, 0.0) solid 2px;
border-radius: 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out:hover:before,
.hvr-ripple-out:focus:before,
.hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
border-color: #39CCCC;
animation-fill-mode: forwards;
}
.fill {
background-color: #39CCCC;
color: #fff;
border: 1px solid #fff;
}
.fill:hover {
color: #fff;
border: 1px solid #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<div style="padding: 100px; float: left;">
<a class="hvr-ripple-out"><i class="fas fa-check"></i></a>
</div>
如果您需要移动设备支持的功能,则需要实现jquery mobile:
jQuery mobile支持tap事件。
将此代码添加到您的页面。它链接了JQuery移动JavaScript文件。
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>