我在我的网站上使用CSS网格和setTimeout()
来淡入和淡出不同的网格元素以及改变边框大小。我现在需要让网格在连续循环中工作 - 我正在尝试清除超时和添加的样式然后重新启动初始函数这是我现在所拥有的,我将如何使其工作?开发站点是:http://torabhaig-com.stackstaging.com/Home/和我的代码如下:
var timeouts = [];
function playStory(){
stopTracked();
alert('Tracked timeouts cleared!');
if ($(window).width() < 768) {
setTimeout(function(){
$('.item-7').css('opacity', 1);
}, 3000);
setTimeout(function(){
$('.item-11').css('opacity', 1);
}, 6000);
setTimeout(function(){
$('.item-9').css('opacity', 1);
}, 9000);
setTimeout(function(){
$('.item-12').css('opacity', 1);
}, 12000);
setTimeout(function(){
$('.item-8').css('opacity', 1);
}, 15000);
setTimeout(function(){
$('.item-13').css('opacity', 1);
}, 18000);
setTimeout(function(){
$('.item-14').css('opacity', 1);
}, 21000);
setTimeout(function(){
$('.item-16').css('opacity', 1);
}, 24000);
setTimeout(function(){
$('.item-17').css('opacity', 1);
}, 27000);
setTimeout(function(){
$('.item-18').css('opacity', 1);
}, 30000);
setTimeout(function(){
$('.item-19').css('opacity', 1);
}, 33000);
setTimeout(function(){
$('.item-20').css('opacity', 1);
}, 36000);
setTimeout(function(){
$('.item-22').css('opacity', 1);
}, 39000);
setTimeout(function(){
$('.item-23').css('opacity', 1);
}, 42000);
setTimeout(function(){
$('.item-24').css('opacity', 1);
}, 45000);
setTimeout(function(){
$('.item-25').css('opacity', 1);
}, 48000);
}
else {
alert(timeouts);
timeouts.push(setTimeout(function(){
$('.item-7').css({'opacity':'1', 'border-top': '6px solid #000'});
$('.item-9').css('border-bottom', 'none');
$('.item-10').css('border-bottom', 'none');
}, 3000));
timeouts.push(setTimeout(function(){
$('.item-8').css('opacity', 1);
}, 6000));
timeouts.push(setTimeout(function(){
$('.item-9').css('opacity', 1);
$('.item-9').css('border-right', '6px solid #000');
}, 9000));
timeouts.push(setTimeout(function(){
$('.item-10').css({'opacity': '1', 'border-bottom': '3px solid #000'});
$('.item-9').css({'border-right':'3px solid #000', 'border-bottom':'3px solid #000'});
$('.item-7').css({'opacity':'1', 'border-top': '3px solid #000'});
}, 12000));
timeouts.push(setTimeout(function(){
$('.item-11').css('opacity', 1);
}, 15000));
timeouts.push(setTimeout(function(){
$('.item-12').css('opacity', 1);
}, 18000));
timeouts.push(setTimeout(function(){
$('.item-13').css('opacity', 1);
}, 21000));
timeouts.push(setTimeout(function(){
$('.item-14').css({'opacity': '1', 'border-bottom': '6px solid #000'});
$('.item-13').css('border-top', 'none');
$('.item-10').css('border-left', 'none');
}, 24000));
timeouts.push(setTimeout(function(){
$('.item-16').css({'opacity': '1', 'border-right':'6px solid #000'});
$('.item-14').css('border-bottom', '3px solid #000');
$('.item-13').css('border-top', '3px solid #000');
}, 27000));
timeouts.push(setTimeout(function(){
$('.item-15').css({'opacity': '1', 'border-bottom': '6px solid #000', 'border-left': 'none'});
}, 30000));
timeouts.push(setTimeout(function(){
$('.item-17').css('opacity', 1);
$('.item-15').css('border-bottom', '3px solid #000');
}, 33000));
timeouts.push(setTimeout(function(){
$('.item-18').css('opacity', 1);
}, 36000));
timeouts.push(setTimeout(function(){
$('.item-19').css('opacity', 1);
}, 39000));
timeouts.push(setTimeout(function(){
$('.item-20').css({'opacity': '1', 'border-top': '6px solid #000'});
}, 42000));
timeouts.push(setTimeout(function(){
$('.item-22').css({'opacity': '1', 'border-right': '6px solid #000'});
}, 45000));
timeouts.push(setTimeout(function(){
$('.item-21').css('opacity', 1);
}, 48000));
timeouts.push(setTimeout(function(){
$('.item-23').css('opacity', 1);
$('.item-20').css('border', '3px solid #000');
}, 51000));
timeouts.push(setTimeout(function(){
$('.item-24').css('opacity', 1);
}, 54000));
timeouts.push(setTimeout(function(){
$('.item-25').css('opacity', 1);
}, 57000));
}
alert(timeouts);
}
function stopTracked()
{
for(var i=0; i<timeouts.length; i++)
{
clearTimeout(timeouts[i]);
}
timeouts = [];
}
function clearStory()
{
setTimeout(function(){
$('.item-7').css('opacity', 0);
$('.item-8').css('opacity', 0);
$('.item-9').css('opacity', 0);
$('.item-10').css('opacity', 0);
$('.item-11').css('opacity', 0);
$('.item-12').css('opacity', 0);
$('.item-13').css('opacity', 0);
$('.item-14').css('opacity', 0);
$('.item-15').css('opacity', 0);
$('.item-16').css('opacity', 0);
$('.item-17').css('opacity', 0);
$('.item-18').css('opacity', 0);
$('.item-19').css('opacity', 0);
$('.item-20').css('opacity', 0);
$('.item-21').css('opacity', 0);
$('.item-22').css('opacity', 0);
$('.item-23').css('opacity', 0);
$('.item-24').css('opacity', 0);
$('.item-25').css('opacity', 0);
}, 60000,);
playStory();
}
playStory();
clearStory();
你的代码非常复杂。当然可以用更短的方式编写。 但如果它对你有效,我不会讨论它。
所以我认为问题是在6000ms循环上运行playStory()
函数...
那将是:
var playInterval = setInterval(playStory,6000);
// To stop it
clearInterval(playInterval);
如果你想循环clearStory()
:
var playInterval = setInterval(function(){
playStory();
clearStory();
},6000);
// To stop it
clearInterval(playInterval);