我从这个使用SVG / Circle元素和jQuery动画函数的website得到了一个惊人的涟漪效果实现来创建用户点击的涟漪效果。虽然我对基础编程有所了解,但我对JavaScript和jQuery方法/函数知之甚少,所以我从我对JS和jQuery的研究中读了很多。
我发现了涟漪效应的实现;有用,重量轻,容易,所以我想探索和扩展代码以适应我的项目。
好的,所以我需要知道的第一件事是,如何在动画停止动画时重置动画所做的更改?我知道这对你来说是一个简单的问题,但作为JS和jQuery的初学者,我怎么能实现呢?
以下是演示code以了解此处的实际情况。
我尝试添加该功能(如代码所示):
complete : function(){c.removeAttr('style');}
但是没有任何改变,动画结束后它仍然存在。
知道我在想什么吗?
答案 0 :(得分:2)
将完整回调更改为:
complete : function() { $(this).remove(); }
答案 1 :(得分:1)
要从圆圈的样式属性中删除“r”,请尝试
complete : function(){c.css( "r", "" );}
参考:http://api.jquery.com/css/将样式属性的值设置为空字符串 - 例如$( "#mydiv" ).css( "color", "" )
- 从元素中删除该属性。
或
complete : function(){c.css( "r", "0" );}
尝试运行以下代码段:
(function(){
$(".button").on("click", function(e){
var yOffset = e.pageY - $(this).offset().top;
var xOffset = e.pageX - $(this).offset().left;
var self = this;
var xPos = parseInt(xOffset);
var yPos = parseInt(yOffset);
$(this).find("svg").remove(); // Remove existing animation changes
$(this).append('<svg><circle cx="'+xPos+'" cy="'+yPos+'" r="'+0+'"></circle></svg>');
/* Make the animation of SVG - Circle */
var c = $(self).find("circle");
c.animate(
{
"r" : $(self).outerWidth()
},
{
easing: "easeOutQuad",
duration: 500,
step : function(val){},
/*-------------------------
THIS FUNCTION SHOULD WORK
--------------------------*/
complete : function(){c.css( "r", "0" );}
}
);
});
}());
.button {
position: relative;
display: inline-block;
height: 40px;
padding: 0 20px;
margin: 0;
background: transparent;
border: none;
color: rgb(0,0,0,0);
font-size: 20px;
font-weight: 900;
text-align: center;
text-transform: uppercase;
-webkit-tap-highlight-color: transparent;
}
.button:hover {
background-color: rgba(158,158,158,0.10);
}
.button:active,
.button:focus {
background-color: rgba(158,158,158, 0.30);
outline: 0;
}
/* SVG - Circle for the ripple effect */
.button svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.button circle {
fill: rgba(0,0,0,0.50);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Reset jQuery animation when it stops animating</title>
</head>
<body>
<button class="button">Button</button>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
</body>
</html>
答案 2 :(得分:0)
你应该使用停止方法停止动画 - https://api.jquery.com/stop/
你也可以使用clearQueue方法