我在Safari中運行多個動畫而沒有瀏覽器滯後存在一些困難。我的動畫在所有其他瀏覽器中都很流暢。清除setInterval問題
我不知道它是否是與我的腳本:
var looping;
function loop()
{
var scrollTop = $(window).scrollTop();
if(scrollTop > 300 && scrollTop < 1001)
{
looping = setInterval(function()
{
$('.page.active .strip').stop().animate(
{
'background-position': '-=100px'
},1000,'linear');
},1000);
}
else if(scrollTop < 301 || scrollTop > 1000)
{
clearInterval(looping);
$('.page.active .strip').stop();
}
}
我試圖做到的,是使一個無限旋轉圖像。
我已經試過兩個以下,以使動畫停止:
clearInterval(looping);
$('.page.active .strip').stop();
不工作。正如你在上面看到的,我希望動畫只在用戶可見條帶後運行。
與此同時我有這個動畫運行。
function loadLandingSlider()
{
totalImg = $('.page.active #rotating-item-wrapper img').length;
rotate = setInterval(
function()
{
loadImg();
}, 3000);
}
function loadImg()
{
$('.page.active .rotating-item').fadeOut(1000);
$('.page.active #rot' + counter).fadeIn(1000);
if(counter == totalImg) counter = 1;
else counter ++;
}
這僅僅是一個基本的圖像淡出畫廊
我試圖與CSS3動畫更換劇本,而是使它落後更
任何幫助表示讚賞!
如果可能,你可以提供一個jsfiddle演示嗎? –
問題是有相當多的代碼。但是我現在要添加它 –
如何在'loop()'的'if'塊中添加'clearInterval(looping);'作爲第一行。你可以試試嗎?即clearInterval(循環);在if和else塊中。 –