Задержка щелчка на кнопке, чтобы эффект произошел

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";, чтобы переключиться в сторону после анимации.