Delay link click - not working

Design help Custom code
1

Need to delay a link click so there is time to animate an out interaction.

tried this

  $('#aboutLink').click(function(e) {
     e.preventDefault();
       var linkUrl = $(this).attr('href'):
       setTimeout(function(url) { window.location = url; }, 5000, linkUrl);
  });

& this

$(function(){
$("#aboutLink").click(function(evt){
    var link = $(this).attr("href");
    setTimeout(function() {
        window.location.href = link;
    }, 2000);
  });
});

Neither seem to be working! What am I doing wrong?

Live Link - http://emma-dodi-final.webflow.io/

Preview Link - https://preview.webflow.com/preview/emma-dodi-final?preview=3b2674bca8d4db06d4969a2d511f9a44

Thanks,
Will

2

@samliew Do you know why nether of these work in webflow? I’ve used them outside in sublime text before. Would be great to figure this one out as I know there are a lot of other people on the forum trying to achieve this.

3

It’s working, but only on the first element on the page with the ID aboutLink. This is because IDs have to be unique. If you want to affect multiple elements you should be looking at using class selectors.

4

Oh wow it’s magically started working. Thank you @samliew I’ve learned so much from your replies, you’re the man. :slight_smile:

5

Sorry, but may I ask which code worked for you? I’m trying to use it with a class, but none of them seem to be working.

Thanks a lot!

6

Would like to know what @gabermesz asked, too. It’s not working. I tried to put it in the footer of the whole project and a single page (not at the same time).

I animated a button click but the page loads too fast.

7

@gabermesz @Mahir and anyone who needs this:

The code works, but a few things to take note of:

  1. You need to add tags to the code, otherwise, it won’t work.

<script> $('.pagetransition').click(function(e) { e.preventDefault(); var linkUrl = $(this).attr('href'); setTimeout(function(url) { window.location = url; }, 3000, linkUrl); }); </script>

  1. Copy and paste the code in the Custom Code section in the Settings Page, second last tab. This is where the proper footer code should be pasted—not in Designer.

  2. As per @samliew’s reminder, user a Class (e.g. .link-block and NOT #link-block). This will affect all Link Blocks on your site.

  3. Publish.

  4. Note: If, however, you wish to be selective with the usage of this delay transition, then you can use, say, .pagetransition as a combo class. As and when you want the link to have this transition, drop the combo class in.
    E.g.
    image

That should work.

Cheers,
Robs

2 Likes