Question

这里的li元素动画是否可能：

在使用show / hide函数而不是remove时动画？当我将“删除”更改为“隐藏”时，元素无法移动：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

我编辑了你的jsFiddle： http://jsfiddle.net/8XM3q/101/

请注意我更改了这一行：编辑：http://jsfiddle.net/8XM3q/101/ $（本）.closest（ “里”）除去（）;

到此： $(this).closest("li").hide("slow",function(){$(this).detach()});

这意味着隐藏项目，速度=慢，完成后隐藏删除它。

希望这就是你的意思。

编辑：包括分离。

Answer 2

如果您想拥有动画但仍然拥有所有数据，请使用detach（）函数而不是remove：jQuery - detach

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

Answer 3

As per your comment：

我想将此功能用于我的内容过滤动画 - 这就是为什么我必须将“删除”替换为“隐藏/显示”我不想这样做完全删除元素。对不起，如果我用我的问题误导你。

您可以执行的操作是使用缓存来存储列表项，因为它们在您执行内容过滤时会被隐藏。稍后当您需要重置整个列表时，可以从缓存中补充项目。

相关代码片段......

HTML ：

...
<button class="append">Add new item</button>
<button class="replenish">Replenish from cache</button>
<div id="cache"></div>

JS ：

...
$(this).closest("li").hide(600, function() { 
    $(this).appendTo($('#cache')); 
});
...
$(".replenish").click(function () {
    $("#cache").children().eq(0).appendTo($(".items")).show();
});

演示小提琴：http://jsfiddle.net/abhitalks/8XM3q/102/

<强>段：

$(function() {
    $(document.body).on("click", ".delete", function (evt) {
        evt.preventDefault();
        $(this).closest("li").hide(600, function() { 
            $(this).appendTo($('#cache')); 
		});
    });
    
    $(".append").click(function () {
        $("<li>New item  <a href='#' class='delete'>delete</a></li>").insertAfter($(".items").children()[2]);
    });
    $(".replenish").click(function () {
        $("#cache").children().eq(0).appendTo($(".items")).show();
    });

    // Workaround for Webkit bug: force scroll height to be recomputed after the transition ends, not only when it starts
    $(".items").on("webkitTransitionEnd", function () {
        $(this).hide().offset();
        $(this).show();
    });
});

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");
    }
}

createListStyles(".items li:nth-child({0})", 50, 3);

body { font-family: Arial; }
.items { 
    list-style-type: none; padding: 0; position: relative;
    border: 1px solid black; height: 220px; overflow-y: auto; overflow-x: hidden;
    width: 600px;
}
.items li { 
    height: 50px; width: 200px; line-height: 50px; padding-left: 20px;
    border: 1px solid silver; background: #eee; box-sizing: border-box; -moz-box-sizing: border-box;
    position: absolute; top: 0; left: 0; 
    -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
div.cache { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="items">
    <li>Monday <a href="#" class="delete">delete</a>
    </li><li>Tuesday <a href="#" class="delete">delete</a>
    </li><li>Wednesday <a href="#" class="delete">delete</a>
    </li><li>Thursday <a href="#" class="delete">delete</a>
    </li><li>Friday <a href="#" class="delete">delete</a>
    </li><li>Saturday <a href="#" class="delete">delete</a>
    </li><li>Sunday <a href="#" class="delete">delete</a></li>
</ul>
<button class="append">Add new item</button>
<button class="replenish">Replenish from cache</button>
<div id="cache"></div>

Answer 4

编辑：有一种更简单的方法，无需添加任何类，就是使用:visible选择器

你需要理解一个概念是Javascript，即函数被认为是对象。您可以将函数传递给另一个函数，或从函数返回函数。

让我们查看jQuery上有关hide函数

的文档

.hide( duration [, easing ] [, complete ] )

它表示它接受一个函数作为完成的参数，当隐藏动画完成时调用该函数。

函数hide不会从DOM中删除元素，而只是像顾名思义“隐藏”它。所以我们想做的是隐藏元素，然后当隐藏动画完成时，我们将一个“删除”的类添加到列表元素。

我们将通过传递一个函数（complete参数）来实现这一点：

$(this).closest("li").hide(400, function() {
  $(this).addClass('removed');
});

如果要选择未“删除”的列表元素，请使用此选择器$('li:not(.removed)')

隐藏/显示

4 个答案: