jQuery delay function on click

Question

I'm having some trouble trying to delay a function from executing on a click event.

I have a series of links, each one's href being a unique YouTube video embed URL. What I'm trying to do is switch the source of an iframe on my page, using one of these YouTube URLs. But I'm trying to delay the switch while my page scrolls back to the top.

I have created a Fiddle that better illustrates my point.

I originally had this JS function;

$(".play-video").click(function(e) {
    $("html, body").animate({ scrollTop: 0 }, 500);
    $("#video-frame").attr("src", $(this).attr("href"));
});

Which worked in both scrolling the page and switching the iframe, but scrolling the page while switching the iframe source made the scroll animation a bit jerky which isn't ideal.

Any help with this would be great.

Thanks in advance.

pass a complete function to jquery's animate, which will only run once the animation is complete — billyonecan
– billyonecan, Commented Jul 27, 2015 at 13:25
⇑⇑⇑ like this e.g: jsfiddle.net/g882Lc79/2 or maybe better jsfiddle.net/g882Lc79/4 — A. Wolff
– A. Wolff, Commented Jul 27, 2015 at 13:26

Justin Morgan · Accepted Answer · 2015-07-27 14:04:53Z

2

There's no need to mess around with setInterval or setTimeout. The animate method accepts a complete callback to be run when the animation is complete.

$(".play-video").click(function(e) {
    $("html, body").animate({ scrollTop: 0 }, 500, function() {
       $("#video-frame").attr("src", $(this).attr("href"));
    });
});

answered Jul 27, 2015 at 14:04

Justin Morgan

30.7k13 gold badges82 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery delay function on click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related