[英]How do I pause and resume with a fadeLoop?
I have a show and hide div fade loop that I am using like a short interactive tutorial with tips. 我有一个显示和隐藏div淡入淡出循环,就像一个带提示的简短交互式教程一样。 I can get the divs to cycle through in order;
我可以让div按顺序循环; however, I would like to add a pause button inside of each tip that pauses the loop, with the ability to resume.
但是,我想在每个提示的内部添加一个暂停按钮来暂停循环,并具有恢复功能。 How do I add that functionality into my script?
如何将该功能添加到脚本中?
Here is my js: 这是我的js:
$(document).ready(function(){
fadeLoop()
function fadeLoop() {
var counter = 0,
divs = $('.fader').css('visibility','visible').hide(),
dur = 100;
function showDiv() {
$("div.fader").fadeOut(dur) // hide all divs
.filter(function(index) {
return index == counter % divs.length;
}) // figure out correct div to show
.delay(dur) // delay until fadeout is finished
.fadeIn(dur); // and show it
counter++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
return setInterval(function() {
showDiv(); // show next div
}, 4 * 1000); // do this every 4 seconds
};
$(function() {
var interval;
$("#start").click(function() {
if (interval == undefined){
interval = fadeLoop();
$(this).val("Stop");
}
else{
clearInterval(interval);
$(this).val("Start");
interval = undefined;
}
});
});
});
And here is my fiddle: Updated Fiddle 这是我的小提琴: 更新的小提琴
I have solved by using a global variable window.i
as the counter 我已经通过使用全局变量
window.i
作为计数器解决了
function fadeLoop() {
var divs = $('.fader').hide(),
dur = 200;
function showDiv() {
divs.fadeOut(dur) // hide all divs
.filter(function(index) {
return index == window.i % divs.length;
}) // figure out correct div to show
.delay(dur) // delay until fadeout is finished
.fadeIn(dur); // and show it
window.i++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
return setInterval(function() {
showDiv(); // show next div
}, 1 * 1000); // do this every 5 seconds
};
$(function() {
var interval;
window.i = 0;
$("#start").click(function() {
if (interval == undefined){
interval = fadeLoop();
$(this).val("Stop");
}
else{
clearInterval(interval);
$(this).val("Start");
interval = undefined;
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.