单击jQuery延迟功能

Question

我在尝试延迟函数执行点击事件时遇到了一些麻烦。

我有一系列链接，每个链接href都是唯一的YouTube视频嵌入网址。我要做的是使用其中一个YouTube网址在我的网页上切换iframe的来源。但是当我的页面滚动回到顶部时，我正试图延迟切换。

我创建了Fiddle，更能说明我的观点。

我最初有这个JS功能;

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

在滚动页面和切换iframe时都有效，但在切换iframe源时滚动页面会使滚动动画有点生涩，这是不理想的。

任何帮助都会很棒。

提前致谢。

Answer 1

无需使用setInterval或setTimeout。动画完成后运行The animate method accepts a complete callback。

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