如何同时为数组中的两个svgs设置动画？

Question

我有一个svg数组：

var rects = []; //for svg objectsvar
var j=0;
var NS ="http://www.w3.org/2000/svg";
var x = 140, y = 100;

$(document).ready(function() {
  function drawRect() {
    for(var i=0; i<4; i++) {
      var rect = document.createElementNS(NS, 'rect'); 
      rect.setAttributeNS(null, 'id', "srect"+i); 
      rect.setAttributeNS(null, 'x', x); 
      rect.setAttributeNS(null, 'y', y);
      rect.setAttributeNS(null, 'height', '80');
      rect.setAttributeNS(null, 'width', '80');
      rect.setAttributeNS(null, 'fill', '#000000');
      rects.push(rect); 
      document.getElementById('svgOne').appendChild(rects[i]);  
      x+=80;
   }
   moveTwoRect(j);
  }
}
function moveTwoRect() {
     for(var j=0; j<4; j++) {
       $(function () {
         $('#'+rects[j].id).animate({y: '50px'}, 3000); 
         $('#'+rects[j+1].id).animate({y: '50px'}, 3000); 
       });
     } 
}
$("#bu").click(drawRect); 
});
</script>
<svg xmlns:svg="http://www.w3.org/2000/svg" id="svgOne"
xmlns="http://www.w3.org/2000/svg" width="800" height="600"> 
This browser is not support svg. Please Upgrade Your browser version 
or Use Other browser.
<rect width="800" height="400" style="fill:white; stroke-width:3;stroke:black"> 
</svg>
<button id='bu1'>Push Me</button>

我想同时搬两个地方 例如，rects [0]，rects [1]同时移动 和rects [1]，rects [2]同时移动 其他的移动就像这样。 但是当我按下按钮时，所有的rects都在同一时间移动 我该怎么办这个问题？
我想只使用javascript或jquery。