我的网页中有一个视频元素嵌套在一个 div class="video-container"和一个 div class="video-control-bar"中,我正在使用 JQuery 制作动画。我还使用 setInterval 来查询视频元素的当前时间,并将其反射(reflect)在视频控制栏中包含的进度条中。
JavaScript:
$(function(){
$(".video-container").each(function(){
player_init($(this))
})
})
function player_init(self)
{
setInterval(function(){
var video = self.find("video")[0]
self.find(".video-control-bar").find(".video-position").find("input").val(video.currentTime / video.duration)
self.find(".video-control-bar").find(".video-position").find("progress").val(video.currentTime / video.duration)
}, 500)
self.hover(function(){
self.find(".video-control-bar").stop().animate({bottom: "0px"}, 25)
}, function(){
self.find(".video-control-bar").stop().animate({bottom: "-39px"}, 350)
})
}
问题?嗯,在 Chrome 中,如果我加载页面,我的 setInterval 函数会像预期的那样每 500 毫秒调用一次,直到我将鼠标悬停在播放器上,导致控制栏动画。之后不再调用我的 setInterval 函数。
但是 如果我点击刷新,页面会重新加载,我可以随心所欲地将鼠标悬停在它上面,一切都会继续正常工作。但只有我通过刷新加载页面。
这在 Firefox 中不会发生。我怀疑这可能是 Chrome 中的一个错误,因为它类似于我提交的问题 here .
我真的不知道这是我做事方式的问题、JQuery 的问题还是 Chrome 的错误。我真的不在乎是谁的错误,我只希望一切正常。
谢谢。
最佳答案
self.hover() 完成后可能会返回,从而结束 player_init()
尝试一些将超时功能与悬停功能分开的东西,像这样:
$(function(){
$(".video-container").each(function(){
$this = $(this); //small optimization
hover_init($this);
player_init($this);
});
});
function player_init(self){
var a = self.find(".video-control-bar .video-position");
var video = self.find("video")[0]
setInterval(function(){
a.find("input").val(video.currentTime / video.duration)
a.find("progress").val(video.currentTime / video.duration)
}, 500)
}
function hover_init(self){
selfhover(
function(){
self.find(".video-control-bar").stop().animate({bottom: "0px"}, 25)
}, function(){
self.find(".video-control-bar").stop().animate({bottom: "-39px"}, 350)
});
}
关于jquery - Chrome 中无法解释的行为,是我的代码还是他们的代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7295956/