[英]How do I pause and resume with a fadeLoop?
我有一個顯示和隱藏div淡入淡出循環,就像一個帶提示的簡短交互式教程一樣。 我可以讓div按順序循環; 但是,我想在每個提示的內部添加一個暫停按鈕來暫停循環,並具有恢復功能。 如何將該功能添加到腳本中?
這是我的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;
}
});
});
});
這是我的小提琴: 更新的小提琴
我已經通過使用全局變量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.