jquery焦点图自动切换开始是正常的，一段时间就乱了

写了一个随机图片的自动切换代码，每次运行一会儿就不正常了。主要代码如下

http://codepen.io/alianlian/pen/PqwejG

主要原理是先添加一张随机图片，然后DIV里面就会有两张，然后同时向上移动100px,之后再将第一个图片删除，去掉第二个图片的translate属性。
最开始是正常的，大概一分钟后就乱了，看了一下，是因为到后来删除img没有执行。

---

通过观察它的dom结构变化，发现img的数量在某些时刻会一直增加，而不是一直保持两个。
这说明在一个interval的执行过程中（240ms），两个animate的complete函数并没有真正执行。
个人建议：将animate的180改小，或者把interval的240改大试试看。

更新：
如果你将浏览器的标签切到另外一个再回来，会发现立刻出错。
我将js代码修改了一下一遍测试：

setInterval(function(){
  $(".image-wrapper").append('<img src="http://qingvoice-song-pics.qiniudn.com/101039.jpg?imageView2/2/w/200/h/200">');
  $('.image-wrapper').find('img:first-child').animate({
    "transform": "translate(0px, -100px)"
  }, {duration: 180, complete: function() { 
        $(this).remove(); 
        console.log("remove complete: " + (new Date()).getTime());} 
  });
  $('.image-wrapper').find('img:last-child').animate({
    "transform": "translate(0px, -100px)"
  }, {duration: 180, complete: function(){ 
        $(this).removeAttr('style');
        console.log("scrollUp complete: " + (new Date()).getTime());}
  });

// 输出当前时间戳
console.log((new Date()).getTime());

},'1000');

控制台结果如下：

可以看到在tab切走的时候，两次interval的duration超过1000ms。而且interval内容的执行和complete函数的执行完全被打乱。
我的猜测：当tab切走时，浏览器的线程会发生一定改变导致原本正常运行的interval不再按原来的duration执行。
具体有关浏览器线程的问题我也没有深究。。

---

不跑代码纯猜测的话，感觉是定时处理的东西太多了，每次执行的时间可能并不那么精确，久而久之就错乱了

2个同时向上移动可以修改用父元素的scrollTop的方法在一个animate里面做，然后在这个animate的complete里面用setTimeout调用自己，取代开头的setInterval，这样能保证次第完成