關於浮動元素的jquery動畫

Question

我是javascript中的新成員，並且遇到了使用jquery動畫浮動元素的問題，希望有人可以幫助我解決它。 我將能夠製作100％寬度的水平手風琴。

爲此，我在包裝中有一些浮動div。用javascript，我用div的數量（以百分比）劃分包裝的寬度。然後，在點擊時，選擇的div爲大尺寸，其他爲小尺寸。問題在於動畫期間，最後一個div落在底部。在結束時，它在好的地方。我已經看到問題取決於窗口的大小。在某些情況下，沒關係，但並非總是如此。 這裏是一個小提琴鏈接：test

我已經解決69％而不是70％，把總寬度爲99％，通過使例如開大小，但我真的需要它的寬度爲100％真的不知道該怎麼做。 如果有人能幫我解決這個問題或找到另一個解決方案，這可能會很好。

PS：原諒我的英語:-)

Answer 1

的問題是，你必須運行不完全同步兩個獨立的動畫，你想到兩人的總百分比始終低於100％。當你同時啓動它們時，有時候這種情況不會發生，只要總數超過100％，最後一個就會被推到下一行。

最簡單的解決方法是稍微延遲一個正在增長的人，因此總數總是小於100％。您可以看到添加到第二個動畫的.delay（50），以確保增長的元素始終位於收縮元素的後面，因此總數始終小於100％。工作演示：http://jsfiddle.net/jfriend00/Fkb5K/。

的代碼段，其中的溶液中加入.delay(50)：

if (!$el.hasClass('current')) 
    { 

     // Animate other columns to smaller size 
     $otherItems 
     .removeClass('curCol') 
     .stop(true) 
     .animate({ 'width': $closedItemsWidth }, 500, 'linear') 
     .css({"cursor":"pointer"}); 

     // Animate current column to larger size 
     $el 
     .addClass('curCol') 
     .stop(true) 
     .delay(50) 
     .animate({ 'width' : $openItemWidth }, 500, 'linear') 
     .css({'cursor' : 'default'}); 

    // Make sure the correct column is current 
    $otherItems.removeClass('curCol'); 
    $el.addClass('curCol'); 


    } 

也許是最好的解決方案是一個自定義動畫改變在完全相同的動畫兩個寬度百分比（只有一個動畫，而不是兩個），所以它們總是在完美同步。

這是一個自定義動畫。它將刪除正在增長的元素的動畫，而是在所有較短的元素上添加一個步驟函數回調。任何時候，step函數都會調用其中一個元素更改動畫中的大小。在該步驟函數中，它將該時間點的較短元素的寬度相加，並設置較長的元素以每次完全追蹤100％的總和。

// On click 
$grid.delegate('#grid > .col', 'click', function() { 
    // Settings 
    var $el = $(this); 
    var $allItems = $grid.children('.col'); 
    var $otherItems = $allItems.not($el); 

    if (!$el.hasClass('current')) { 
     // Animate other columns to smaller size 
     $otherItems.stop(true) 
     .removeClass('curCol') 
     .animate({ 'width': $closedItemsWidth}, {step: function(prop, fx) { 
      var cumWidth = 0; 
      var item = this; 
      $otherItems.each(function() { 
       // haven't changed the width of this item yet, so use new width 
       if (this == item) { 
        cumWidth += fx.now; 
       } else { 
        cumWidth += parseFloat(this.style.width); 
       } 
      }); 
      $el.css({width: (100 - cumWidth) + '%'}); 
     }, duration: 500 }, 'linear') 
     .css({"cursor":"pointer"}); 

     // Animate current column to larger size 
     $el.addClass('curCol').css({'cursor' : 'default'}); 
    } 
})​ 

工作演示在這裏：http://jsfiddle.net/jfriend00/7zubL/