Clearing setInterval issue

Question

I am having some difficulties running multiple animation in Safari without the browser lagging. My animations are smooth in all other browsers.

I'm not sure whether it has something to do with my script:

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();
    }
}

What I'm trying to achieve is to make an infinite rotating image.

I have tried both the following to make the animation stop:

clearInterval(looping);
$('.page.active .strip').stop();

Which does not work. As you can see above I want the animation only to run once the strip is visible to the user.

At the same time I have this animation running.

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

This is just a basic image fadeOut gallery

I have tried replacing the script with css3 animations, but that made it lag even more

Any help appreciated!

Answer 1

Make your loop look like this ...

Add clearInterval(looping); as the first line in if block in loop(). Can you try that? i.e. clearInterval(looping); in both if and else block.

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();
  }
}