Delay a link click

javascript jquery delay

17,888

Solution 1

You can simulate navigating to a page by settings window.location. So we will block the normal function of the link with preventDefault and then in a setTimeout, we will set the correct window.location:

https://codepen.io/anon/pen/PePLbv

$("a.question[href]").click(function(e){
    e.preventDefault();
    if (this.href) {
        var target = this.href;
        setTimeout(function(){
            window.location = target;
        }, 2000);
    }
});

Solution 2

Check this fiddle: http://jsfiddle.net/C87wM/1/

Modify your toggle like this:

$("a.question[href]").click(function(){
    var self = $(this);
    self.toggleClass("active").next().slideToggle(2000, function() {
        window.location.href = self.attr('href'); // go to href after the slide animation completes
    });
    return false; // And also make sure you return false from your click handler.
});

Solution 3

Cancel the click and use setTimeout to change the location.

$(document).ready(function(){

    $("span.answer").hide();

    $("a.question").click(function(e){
        $(this).toggleClass("active").next().slideToggle("slow");
        e.preventDefault();
        var loc = this.href;
        if(loc){
            window.setTimeout( function(){ window.location.href=loc; }, 2000 );
        }
    });

});

Solution 4

$(document).ready(function(){

    $("span.answer").hide();

    $("a.question").click(function(e){
        e.preventDefault();
        $(this).toggleClass("active").next().slideToggle("slow");
        var Link = $(this).attr("href");
        setTimeout(function()
        {
             window.location.href = Link;
        },2000);
    });

});

View more solutions

17,888

Author by

henryaaron

Updated on June 29, 2022

Comments

henryaaron almost 2 years

Here's the fiddle I'm working with: http://jsfiddle.net/Scd9b/

How can I delay the href function after the click?

For example a user clicks on the link, the message slides down One moment... and after 2 seconds the user continues to the page its linked to.

Sorry everybody forgot to mention there are some anchors that are not linked.
jfriend00 over 12 years

+1 for using the completion function of the animation rather than a setTimeout().
henryaaron over 12 years

But I also have some anchors that are not linked. Those are being redirected to an undefined URL. Any way to get this script working with out redirecting the unlinked anchors?
henryaaron over 12 years

But I also have some anchors that are not linked. Those are being redirected to an undefined URL. Any way to get this script working with out redirecting the unlinked anchors?
rstrelba over 12 years

What do you mean by unlinked?
henryaaron over 12 years

But I also have some anchors that are not linked. Those are being redirected to an undefined URL. Any way to get this script working with out redirecting the unlinked anchors?
techfoobar over 12 years

@Purmou This way we can be sure that the user sees the full animation. Also this way, we need not worry about making sure that the link delay is more than the animation duration. i.e. we can freely use slow or fast or 2000 etc.
henryaaron over 12 years

<a class="question">Hello</a>
techfoobar over 12 years

@user1090389 - For that use the $("a.question[href]") selector instead of $("a.question")
henryaaron over 12 years

@techfoobar But I still want the animation to work on those that are not linked...
Purag over 12 years

Only prop(). Replace it with attr() and you'll be fine. Though I recommend using the latest version anyways.
henryaaron over 12 years

I wish... my site won't let me.
Purag over 12 years

Well this makes the animation take 2 seconds and have the page redirect right after. Shouldn't it show the message for 2 whole seconds then redirect?
Nate Bolam over 12 years

$(this).attr('href') is undefined in the slideToggle callback. $(this) refers to $("#active") in the scope of the callback.
epascarello over 12 years

check to see if loc has a value. edited code. or you can use a selector that makes sure it has an href. a.question[href]
jfriend00 over 12 years

this will be window inside the setTimeout callback so this won't work as written. You would have to either save the URL or this to a different variable before the setTimeout call.
jfriend00 over 12 years

this will be window inside the setTimeout callback so this won't work as written. You would have to either save the URL or this to a different variable before the setTimeout call.
Tim MB about 6 years

Please include your code in the answer as well as on jsfiddle (link now dead).