jQuery花費太長的時間來渲染大量項目的動畫

在我當前的項目中，我有一個包含項目行的表。每個項目都有其上執行的動畫，如圖隱藏複選框：jQuery花費太長的時間來渲染大量項目的動畫

$('.elemToShow').each(function(){ 
    $(this).show('fast'); 
});

的問題是，作爲項目的名單會越來越大，功能花費這麼多的時間來渲染，它只是「啪啪」上屏幕過了一會兒，而不是像預期的那樣顯示動畫。

有沒有什麼辦法可以執行這個函數，讓它動畫而不管列表大小？

來源

2013-03-06 Rob

如果你申請的'類= 「elemToShow」'每個列表項目，當然它會很慢。考慮將該類添加到列表容器中。 – 2013-03-06 14:22:09

這是一個動畫，你可以用CSS實現，只需添加一個類，並讓CSS3動畫處理它（並讓舊的瀏覽器優雅地降級？） – BLSully 2013-03-06 14:31:00

@Kolink不幸的是我目前正在使用表格，而我想要動畫的只是每行內的一個元素（複選框要清除）。我已經編輯了這個問題來反映這一點。 – Rob 2013-03-06 15:04:54

我想這可能工作。

的Javascript：

function showCheckbox(element, elementClass, parentClass) { 
    var $element = element; 

    $element.show(200, function() { 
     var $next = $(this).closest(parentClass).find(elementClass+':hidden').first(); 

     if ($next[0]) { 
      showCheckbox($next, elementClass, parentClass); 
     } 
    }) 
} 

showCheckbox($('.element:first'), '.element', 'tr');

下面是HTML

<table> 
<tr> 
    <td> 
     <input type="checkbox" class="element" /> 
    </td> 
    <td> 
     <input type="checkbox" class="element" /> 
    </td> 
    <td> 
     <input type="checkbox" class="element" /> 
    </td> 
    <td> 
     <input type="checkbox" class="element" /> 
    </td> 
    <td> 
     <input type="checkbox" class="element" /> 
    </td> 
    <td> 
     <input type="checkbox" class="element" /> 
    </td> 
    <td> 
     <input type="checkbox" class="element" /> 
    </td> 
    <td> 
     <input type="checkbox" class="element" /> 
    </td> 
</tr>

CSS：

.element {display:none}

來源

2013-03-06 17:15:25

這幾乎是我在找的東西。謝謝！ – Rob 2013-03-06 17:25:05

這裏不需要循環開銷，jQuery已經執行基於該選擇器的each。試試這個：

$('.elemToShow').show('fast');

來源

2013-03-06 14:21:16 mattytommo

如果它不是世界的末日，如果舊的瀏覽器不支持的話，試試這個CSS：

.elemToShow { 
    animation: fadein 0.5s ease; 
} 
@keyframes fadein {from{opacity:0} to{opacity:1}}

刪除了jQuery淡出項。通過使瀏覽器句柄消失，它應該更順暢。

（請注意，Chrome仍然會使用-webkit-animation和@-webkit-keyframes前綴的版本，但會改變下一個版本）

來源

2013-03-06 15:08:08

這很有趣！這在IE上表現如何？ – Rob 2013-03-06 16:49:48

IE10支持它，舊版本只顯示沒有淡入淡出的框。 – 2013-03-06 17:00:16

jQuery花費太長的時間來渲染大量項目的動畫

回答

相關問題