多個simultanous動畫，模擬'動畫'緩動和'一步'呼籲jQuery集合

Question

這裏是問題，我有一個html塊的樹結構，全局容器是固定寬度（X）和高度（Y）。當我點擊一個關卡上的其中一個塊時，所有其他塊縮小到一定的尺寸，而點擊後的塊會放大到剩餘空間，並且子平面出現在它的位置上。

對於所有的萎縮我使用默認animate功能與緩動效果，萎縮1級時，爲了避免擴大的bug，我必須做這樣的事情：

$tabs.not($obj).animate({height:32<<$obj.getVerUp().length+"px"},{duration:300, 
    step:function() { 
     $obj.height(function(){ 
      var sum = 0; 
      $tabs.not($obj).each(function(){ 
       sum += $(this).height(); 
      }); 
      return $obj.getCont().height()-sum+"px"; 
     }); 
    } 
}); 

$tabs是所有標籤目前的水平，$obj - 是一個標籤，我想放大

的主要問題是： 當我打開了一個標籤是一個深層次的，我必須動畫所有更高級別的標籤動畫縮小一點點，因此$obj X和Y會發生變化，所以當前動畫必須使用新值，但是如果我在不同級別上調用3個不同動畫，爲了獲得一個bug，當其中一個更深層次的動畫完成了1個步驟，而上面的層次上的一個動畫會將對象放大5-10個像素，並且該空間不會被用完。

第二個問題是，必須有大約50個對象動畫，同時緩動，這有點矯枉過正。

而且最後一個問題是，當我呼籲動畫step回調如上圖所示，我有一種奇怪的感覺，它調用步驟分別爲每個動畫$tabs收集，而我需要1個步驟，列表中的所有標籤（以避免不必要的腳本）

可能有一些其他方法來解決所有這些，但我還沒有發現所有的jQuery函數，所以從我看到的唯一方法是模擬緩動，並在一個單一的動畫中做所有事情。

我真的不想使用setInterval並確定何時需要清除它並計算每個緩動值，如果有一種簡單的方法。

jQuery是否有某種空的動畫緩動

$().css("height":starth+"px").animate({height:endh},{duration:300, 
    step:function(fn) { 

     // all the animation actions here via fn end value 
    } 
}); 

在此先感謝。

---

我需要的 - 是不是在這些主題中的代碼完全工作的解決方案，只是一些啓示：

1. 有沒有打電話給一個階躍函數的動畫元素的集合，通過合法途徑，或者，也許，當我在收集上使用一個.animate時，確實會調用step。

2. 我會非常感激，如果有人灑下如何jQuery的手柄多個.animate，他們會被在上.setInterval工作的全局過程中使用的一些光？或者他們會有大量的.setIntervals等同於setTimeout（大多數瀏覽器無法大量處理）;

3. 有沒有一種方法來模擬「動畫」寬鬆，或許有些函數名，或者一個特殊的技巧來實現這一（我唯一看到的是一個隱藏的元素或「窗口」屬性可能更改）

或者與我應該學習功能的一些指導推動，這可以幫助我實現我的目標

Answer 1

猜猜我幾乎找到了答案，我的問題： http://james.padolsey.com/javascript/fun-with-jquerys-animate/

下面是空的animati從上面的鏈接中選擇具有所需值的1步函數，如果全部結果都將在稍後發佈。

var from = {property: 0}; 
var to = {property: 100}; 

jQuery(from).animate(to, { 
    duration: 100, 
    step: function() { 
     console.log('Currently @ ' + this.property); 
    } 
}); 

---

是這一切偉大的工作，沒有desynch，和良好的速度，因爲只有1個有生命的，發現製作爲動畫一個通用的功能 - 資源的開發浪費，所以它是非常具體的，但仍，這裏是：

animate: function($obj) { 
    var T = this; 
... 

    T.arr = new Array(); 
    // gathering the array 
    $obj.each(function(i){ 
     var size; 
     T.arr[i] = {obj:$(this), rest:$(this).getSibl(), cont:$(this).getCont()} 
     if($(this).hasClass("vert")) 
     { 
      size = "height"; 
      T.arr[i].to = yto; 
     } 
     else 
     { 
      size = "width"; 
      T.arr[i].to = xto; 
      T.arr[i].children = $(this).getChld(); 
     } 
     T.arr[i].rest.each(function(){ 
      $(this).attr("from",$(this)[size]()); 
     }); 
    });  

    // animating prop 
    jQuery({prop:0}).animate({prop:1}, { 
     duration: 300, 
     step: function() { 
      var i; 
      var P = this; 
      var newval; 
      var sum; 
      var size; 
      for(i = 0; i < T.arr.length; i++) 
      { 
       size = T.arr[i].obj.hasClass("vert") ? "height":"width"; 
       sum = 0; 
       T.arr[i].rest.each(function(){ 
        // new value of width/height, determined by the animation percentage 
        newval = parseInt($(this).attr("from")) + (T.arr[i].to-$(this).attr("from"))*P.prop; 
        $(this)[size](newval); 
        sum += newval; 
       }); 
       T.arr[i].obj[size](T.arr[i].cont[size]()-sum); 
      } 
     } 
    }); 
},