Очистка setInterval issue

Question

У меня возникли трудности с запуском нескольких анимаций в Safari без задержки браузера. Мои анимации гладки во всех других браузерах.

Я не уверен, есть ли у него что-то делать с моим сценарием:

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 ++; 
} 

Это только основное изображение FADEOUT галерея

Я попытался заменить скрипт с CSS3 анимации, но сделал это отставание еще более

Любая помощь оценили!

Answer 1

Сделайте петлю выглядеть следующим образом ...

Добавить clearInterval(looping); в качестве первой строки в блоке, если в loop(). Можете ли вы попробовать это? то есть clearInterval(looping); в блоке if и else.

var looping; 

function loop() 
{ 
    var scrollTop = $(window).scrollTop(); 
    clearInterval(looping); 
    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) 
    { 
    $('.page.active .strip').stop(); 
    } 
}