我正在尝试添加此效果:http://codepen.io/440design/pen/iEztk 在我的按钮上。我已经添加了代码,样式和所有内容,但问题是,当我单击按钮时,我看不到效果发生,因为我的按钮将我发送到所需的链接。所以我尝试了setTimeout
,但没有任何运气,如果我使用preventDefault()
我会阻止链接去需要的地方。
我试过这个
var ink, d, x, y;
$(".ripplelink").click(function(e){
e.preventDefault();
if($(this).find(".ink").length === 0){
$(this).prepend("<span class='ink'></span>");
}
ink = $(this).find(".ink");
ink.removeClass("animate");
if(!ink.height() && !ink.width()){
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({height: d, width: d});
}
x = e.pageX - $(this).offset().left - ink.width()/2;
y = e.pageY - $(this).offset().top - ink.height()/2;
ink.css({top: y+'px', left: x+'px'}).addClass("animate");
});
setTimeout(function(){
$('.ripplelink').unbind('click');
}, 2000);
但这行不通。如果我阻止默认并且不取消绑定它,我可以看到涟漪效应,但我需要链接才能工作。
从本质上讲,我想点击按钮,查看效果,然后链接会将我带到我需要去的地方。
使用location.href = "YOUR link";
在动画播放后切换到一侧。