jquery - 当用户每次点击一个元素时执行一个效果
问题描述
每次用户使用 jquery 单击元素时,我如何执行此效果?
我在单击时添加了一个波纹类,但是当我第二次单击该元素时,它无法执行,因为已经添加了该类,我该如何解决这个问题?
<div class="circle-ripple"></div>
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #4e4e4e;
display: flex;
align-items: center;
justify-content: center;
}
.circle-ripple {
background-color: #35ffc3;
width: 1em;
height: 1em;
border-radius: 50%;
}
.ripple {
-webkit-animation: ripple 0.7s linear;
animation: ripple 0.7s linear;
animation-duration:0.5s;
}
@-webkit-keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
}
100% {
box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
}
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
}
100% {
box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
}
}
$(document).ready(function(){
$(".circle-ripple").click(function(){
$(this).addClass("ripple");
});
});
解决方案
如果你想避免超时,你可以像这样重新插入元素(我只更改了 JavaScript):
$(document).ready(function(){
$(".circle-ripple").click(function(){
// reinsert div with ripple class
const new_element = $(this).clone(true);
new_element.addClass("ripple");
$(this).before(new_element);
$(this).remove();
});
});
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #4e4e4e;
display: flex;
align-items: center;
justify-content: center;
}
.circle-ripple {
background-color: #35ffc3;
width: 1em;
height: 1em;
border-radius: 50%;
}
.ripple {
-webkit-animation: ripple 0.7s linear;
animation: ripple 0.7s linear;
animation-duration:0.5s;
}
@-webkit-keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
}
100% {
box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
}
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
}
100% {
box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
}
}
<div class="circle-ripple"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
推荐阅读
- ruby - Bundler 配置以在自定义路径中查找 gem 或从自定义源下载
- php - 在 PHP 上使用带有 SHA256 的 RSA OAEP 解密
- javascript - AddProduct.vue?8047:37 Uncaught (in promise) TypeError: Object(...) is not a function error when trying to add a product
- r - 优化错误(par = Tm1,fn = .logLgam,x = x):找不到对象“Tm1”
- visual-studio - 从 Visual Studio 使用 HTTPS 运行 ASP.NET Core 应用程序以获取专用网络地址
- reactjs - 使用 react-hook-form 注册第三方/自定义组件
- r - 使用 R 在数据框中打印所有年份
- reactjs - React Native - 在图标上渲染组件
- api - 访问和刷新令牌的最佳实践
- python - 是否有修复熊猫索引列中缺失值的标准方法?