jQuery动画，用于未知数量的<李>'s

jQuery animation for an unknown number of <li>'s

本文关键字：lt gt 动画 用于 未知数 jQuery      更新时间：2023-09-26

我知道这段代码非常蹩脚，但到目前为止它运行得很好，所以我保留了它。但现在我有太多<li>和我无法在js中手动添加它们，因为它在wordpress上，并且取决于类别页面，所以<李每次都在变。

我的问题是如何保留该动画并使其在未定义的<li>而不必手动添加它们？有没有一种方法可以在不使用css overflow-y:hidden的情况下停止滚动条的滚动

以下是演示：http://jsfiddle.net/NdRDh/

非常感谢！希望你能帮助我！！

Tom

我建议：

$(document).ready(
    function() {
        $('li').each(
            function(i) {
                $(this)
                    .delay(400)
                    .animate(
                        {
                            'top' : '10px'
                        }, 1500 + (500*i));
            });
    });​

JS Fiddle演示。

哦，请注意，对于所有的li元素，您正在重复相同的id：这是无效的HTML，如：

id=名称[CS]

此属性为元素指定名称。此名称在文档中必须是唯一的。

（引用自：http://www.w3.org/TR/html401/struct/global.html#h-7.5.2）

参考文献：

  • each()
$('li').each(function(i) {
      $(this).delay(400).animate({'top': '10px'}, (500*i)+1000);
});

小提琴示例：http://jsfiddle.net/NdRDh/6/

注意，不能有多个具有相同id的元素

您可以使用each()，如下所示：http://jsfiddle.net/Skooljester/NdRDh/1/

您交换了id和类：将它们作为类的"common"，将它们的类名作为id，然后您可以将它们全部选中，并使用调用animate

 $('li.common').animate(...);

试试这个：

$("li").each(function(index) {
    $(this).delay(400).animate({'top' : '10px'}), 1000 + 500 * index);
});
相关文章：