Question

我有一个简单的网格布局，包含4个缩略图，每个缩略图都有一个链接，用于更改位于页面顶部的单个iframe的目标。这些工作正常，但我想为iframe的目标添加一点延迟，以便在每次点击后让页面滚动到顶部。

这是我的iframe代码;

<iframe id="video-frame" name="video-frame" width="560" height="315" src="[youtube-url]" frameborder="0" allowfullscreen></iframe>

这是我的播放按钮代码（其中有4个，每个都有不同的href值;

<a class="play-button" href="[youtube-url]">&nbsp;</a>

这是我的jQuery代码，在每次.play-button点击时滚动到页面顶部

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

我的问题是更改iframe src会导致滚动出现故障，所以我需要在更改iframe src时添加650ms的延迟，以便滚动完成

Answer 1

如果你要做的就是延迟运行一个功能，你可以尝试一下这样的功能：

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

设定的间隔将在给定时间 650 之后运行一个函数，在我们的情况下意味着650ms。尝试一下，如果它不起作用，请告诉我

jQuery，延迟链接替换iframe目标

1 个答案: