如何在悬停时添加暂停(jquery) [英] how to add pause on hover ( jquery )
问题描述
这是代码:
$(document).ready(function(){
$('#testimonials .slide');
setInterval(function(){
$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('li.slide').size()){
$(this).next().fadeIn(2000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(2000);
}
});
},1000);
});
这适用于ul列表,并希望在悬停时添加暂停.有什么建议. ?
您需要保存setInterval
返回的对象,然后可以将其传递给clearInterval
以阻止它再次发生.>
以下是一些示例代码,应该可以使您获得与所追求的类似的东西:
$(document).ready(function(){
var slider = function() {
$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('li.slide').size()){
$(this).next().fadeIn(2000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(2000);
}
});
};
// save an object so that I can start and stop this as we go
var interval = setInterval(slider, 1000);
// when the user hovers in, clear the interval; if they hover out,
// restart it again
$('#testimonials .slide').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(slider, 1000);
});
});
请注意,对于我来说, 到底是什么仍然悬停才能使间隔停止,所以我不清楚,所以我假设您希望$('#testimonials .slide')
做到这一点.如果没有,只需将其更改为所需的任何内容即可.
Here is the code:
$(document).ready(function(){
$('#testimonials .slide');
setInterval(function(){
$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('li.slide').size()){
$(this).next().fadeIn(2000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(2000);
}
});
},1000);
});
This applies to a ul list , and would like to add pause on hover. Any suggestions. ?
You need to save the object that is returned by setInterval
, and then you can pass it to clearInterval
to stop it from occurring again.
Here is some sample code that should get you something like what you are after:
$(document).ready(function(){
var slider = function() {
$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('li.slide').size()){
$(this).next().fadeIn(2000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(2000);
}
});
};
// save an object so that I can start and stop this as we go
var interval = setInterval(slider, 1000);
// when the user hovers in, clear the interval; if they hover out,
// restart it again
$('#testimonials .slide').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(slider, 1000);
});
});
Note that it's not clear to me what exactly the user hovers over to get the interval to stop, so I assumed you wanted $('#testimonials .slide')
to do that. If not, just change that part to whatever you need.
这篇关于如何在悬停时添加暂停(jquery)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!