Question

我正在尝试在我的按钮上添加此效果：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);

但这不起作用。如果我阻止默认而不解除绑定，我可以看到涟漪效应，但我需要链接才能工作。

本质上我想点击按钮，查看效果，然后链接会将我发送到我需要去的地方。

Answer 1

使用location.href = "YOUR link";切换到动画后的一侧。

延迟单击按钮以实现效果

1 个答案: