2

在我当前的项目中，我有一个包含项目行的表。每个项目都有一个隐藏的复选框，在该复选框上执行动画，如下所示：

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

问题在于，随着项目列表变得越来越大，该函数需要花费大量时间来渲染，以至于它只是在一段时间后“弹出”在屏幕上，而不是按预期显示动画。

有什么方法可以执行这个函数，让它不管列表大小如何都可以动画？

4

3 回答 3

4

这里不需要循环的开销，jQuery 已经each基于该选择器执行了一个。尝试这个：

$('.elemToShow').show('fast');
于 2013-03-06T14:21:16.190 回答
0

我认为这可能有效。

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-06T17:15:25.953 回答
0

如果旧浏览器不支持它不是世界末日，请尝试以下 CSS：

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

删除 jQuery 淡入。通过让浏览器处理淡入淡出，它应该会更流畅。

（请注意，Chrome 仍然使用-webkit-animation和@-webkit-keyframes前缀版本，但这会改变下一个版本）

于 2013-03-06T15:08:08.580 回答