javascript - 隐藏/显示时列表元素动画不起作用

Question

这里是否可以实现 li 元素动画:

http://jsfiddle.net/8XM3q/light/

当使用显示/隐藏功能而不是删除时制作动画？当我将“删除”更改为“隐藏”时，元素没有移动:http://jsfiddle.net/8XM3q/90/

我想将此功能用于我的内容过滤动画 - 这就是为什么我必须将“删除”替换为“隐藏/显示”。

我不擅长 JS，但我认为它会计算所有元素，即使它们是隐藏的:

function createListStyles(rulePattern, rows, cols) {
var rules = [], index = 0;
for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
    for (var colIndex = 0; colIndex < cols; colIndex++) {
        var x = (colIndex * 100) + "%",
            y = (rowIndex * 100) + "%",
            transforms = "{ -webkit-transform: translate3d(" + x + ", " + y + ", 0); transform: translate3d(" + x + ", " + y + ", 0); }";
        rules.push(rulePattern.replace("{0}", ++index) + transforms);
    }
}
var headElem = document.getElementsByTagName("head")[0],
    styleElem = $("<style>").attr("type", "text/css").appendTo(headElem)[0];
if (styleElem.styleSheet) {
    styleElem.styleSheet.cssText = rules.join("\n");
} else {
    styleElem.textContent = rules.join("\n");
}

所以我的问题是如何调整这部分代码以仅计算“显示”(显示)元素？

Answer 1

如果您想要动画并仍然拥有所有数据，请使用 detach() 函数而不是删除:jQuery - detach

要计算或选择元素，请尝试使用附加到每个元素的 css 类来执行此操作。