Question

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

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

问题在于，随着项目列表变大，该函数需要花费很多时间才会在一段时间内在屏幕上“弹出”，而不是按预期显示动画。

有没有办法执行此功能，以便无论列表大小如何都能动画？

Answer 1

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

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

Answer 2

如果旧版浏览器不支持它，那么它不是世界末日，请试试这个CSS：

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

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

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

Answer 3

我认为这可行。

使用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}

jQuery花费太长时间在大型项目列表上呈现动画

3 个答案: