Анимация значка с jQuery

Question

У меня есть анимированная иконка с jQuery. Первый цикл хорош, но когда он перезапускается для следующего цикла, все ускоряется. Кто-нибудь знает, почему?

Я не знаю, если это лучший способ сделать это, но я не знаю другого пути.
Причина, по которой это не gif для альфа-прозрачности.

Пример: http://jsbin.com/ESuGAXe/1/edit?js,output

JQuery:

jQuery(function() { 
    var plusicon = jQuery('.icon.plus'); 
    animateIcon(plusicon, 3000); 

    function animateIcon(plusicon, duration) { 
     jQuery('.sprite1', plusicon).stop(true).animate({'opacity':0}, duration, function() { 
      jQuery('.sprite2', plusicon).stop(true).animate({'opacity':0}, duration, function() { 
       jQuery('.sprite3', plusicon).stop(true).animate({'opacity':0}, duration, function() { 
        animateIcon(); 
       }); 
       jQuery('.sprite1', plusicon).stop(true).animate({'opacity':1}, duration); 
      }); 
      jQuery('.sprite3', plusicon).stop(true).animate({'opacity':1}, duration); 
     }); 
     jQuery('.sprite2', plusicon).stop(true).animate({'opacity':1}, duration); 
    } 
}); 

Answer 1

После завершения последнего шага вы вызвать функцию, чтобы заставить его повторить, но на этот раз без каких-либо аргументов (и, следовательно, не продолжительность), изменить внутреннюю один к этому:

animateIcon(plusicon, duration); 

Это рекурсия, в конечном счете приведет к ошибке, уборщик способом было бы обернуть его в себе tInterval() следующим образом:

function animateIcon(plusicon, duration) { 
    jQuery('.sprite1', plusicon).stop(true).animate({'opacity':0}, duration, function() { 
    jQuery('.sprite2', plusicon).stop(true).animate({'opacity':0}, duration, function() { 
     jQuery('.sprite3', plusicon).stop(true).animate({'opacity':0}, duration); 
     jQuery('.sprite1', plusicon).stop(true).animate({'opacity':1}, duration); 
    }); 
    jQuery('.sprite3', plusicon).stop(true).animate({'opacity':1}, duration); 
    }); 
    jQuery('.sprite2', plusicon).stop(true).animate({'opacity':1}, duration); 
} 

setInterval(function(){animateIcon(plusicon, 3000);}, 9000); /*enough time for all steps to complete*/