jQuery高度動畫跳轉時，動畫元素有超過1行浮動的孩子

在這裏輸入代碼解決方案，這是逃避我，不幸的是，這是在我正在工作的頁面以外重現問題的能力。jQuery高度動畫跳轉時，動畫元素有超過1行浮動的孩子

我的問題是：沒有人有關於jQuery高度動畫（如slideUp（），slideDown（）或slideToggle（））的任何信息部分動畫，然後「跳躍」剩下的方式，它？

注意：你投我失望，因爲小提琴之前，請閱讀休息。

小提琴代表了我試圖完成的一個工作示例，但不幸的是，我根本無法重現問題。我正在處理的頁面不能在這裏發佈，因爲各種各樣的原因並不理想，但如果有人遇到過這種情況，只要知道（以及他們對此做了什麼）將會有所幫助。

問題的更深入的解釋：

相同的標記和CSS和腳本小提琴。單擊.header元素滑動.child元素。然而，無論有多少'行'，.child的高度都會對一個.child-item元素的高度產生動畫效果。一旦這個動畫完成，.child的高度跳轉到所需的全高度，以容納所有的.child-item孩子。然而，在小提琴，它工作正常 - 任何想法？

P.S我不知道發佈代碼的其餘部分是一個問題，但它超出了我的控制範圍，我盡我所能分享了一切，並盡我所能描述了問題。希望對於曾經有過同樣問題的人來說，這已經足夠，可以幫助指出原因。

來源

2011-09-01 jammypeach

我看到你的jsfiddle中的「跳轉」，但它取決於我的瀏覽器的尺寸。移動大小會使跳躍效果消失。 – kinakuta

+1爲漂亮的小貓圖片+1 –

隨着瀏覽器的寬度接近孤立的小貓照片將跳回到前一行的寬度，跳轉效果將返回。 – kinakuta

這不是最好的答案，但我解決這個問題的方法是每隔3個子div在頁面上放置一個<br style='clear:both;'/>，以便手動打破這些行。

這固定了slideDown()動畫並使其平滑並停止跳躍。

這個修復程序的問題是，它依靠你可以打印出<br>每x孩子（這可以用js完成，但我使用php），也意味着如果你有一個液體佈局，這將在更大/更大的屏幕上打破，但由於我是一個固定的佈局，它沒有任何優勢。

代碼：

腳本和CSS是不變的，我做的一點額外的標記是把唯一的事情：

我使用的PHP（模考是所有有它）：

$count=0; 
do { 
    $count++; 
    echo '<div class="child-item">etc</div>'; 

    if ($count%3==0) 
    { 
    //this is the third in this row, print a break 
    echo '<br style="clear:both;"/>'; 
    } 
}while($sqlResults);

如何完成類似jQuery中：

var count=0; 
$('.child').each(function(){ 
    count=0; 
    //for each container element, loop through its children 
    $(this).children('.child-item').each(function(){ 
     count++; 
     if (count%3==0) 
     { 
      //this item is the third in a row, print a br. 
      $(this).after('<br style="clear:both;"/>'); 
     } 
    }); 
});

編輯：更新小提琴腳本http://jsfiddle.net/d7tbh/1/

來源

2011-09-02 08:23:01 jammypeach

jQuery高度動畫跳轉時，動畫元素有超過1行浮動的孩子

回答

相關問題