如何为多个动态生成的 DOM 元素设置动画？答案

【问题标题】：How do I animate multiple dynamically generated DOM elements?如何为多个动态生成的 DOM 元素设置动画？
【发布时间】：2009-06-17 22:23:45
【问题描述】：

这可能有助于了解我来自哪里。 Jquery nested each problem

我正在使用此代码将divs 添加到页面：

jQuery("#list").append(
    jQuery("<div>")
        .attr("id", "Entry")
        .html(html)
);

html 只是一个包含一些文本和一个锚点的字符串。

我正在尝试为新的 div 设置动画 - 有多个 div 的 id 为 #Entry。

这是我的代码：

jQuery("#Entry").hover(function(){  
    jQuery(this)
    .animate({
        width:"50%",
        fontSize: "30px",
        opacity: 0.3,
        borderwidth: "15px"
    }, 500);  
});

以上内容在我的jQuery(document).ready(function(){ } 函数中，如果这很重要的话。

【问题讨论】：

标签： jquery dynamic animation hover

【解决方案1】：

首先，如果您使用该 id 添加超过 1 个<div>，那么您做错了。 id 属性应该（必须）在文档中是唯一的。拥有超过 1 个具有相同 id 的元素将使 Javascript 失控，因为它不应该发生。这相当于两个拥有相同社会安全号码的人。 :) 对于元素组，常见的最佳实践是给它们一个类并以这种方式选择它们。

除此之外，您应该查看live 函数，它可以满足您的需求。本质上，当您在准备好的文档上运行一段代码时，它是针对文档的 current 状态执行的。换句话说，只有在那个时间点存在的元素（与提供的选择器匹配）才会绑定到您提供的事件。创建live 函数是为了解决这个问题。另一种解决方案是在添加新的<div> 后再次运行绑定代码，但这不像使用live 那样干净，它支持您需要的mouseover 和mouseout 事件做hover。

【讨论】：

所以直播不支持悬停。它确实支持鼠标悬停，鼠标悬停。但是，我的 div 中有一个锚点，所以当我沿着锚点移动时，它会注册一个冒泡的鼠标悬停事件，所以我得到一个可笑的闪烁。似乎很多人都处于谷歌搜索的困境中，live 不支持 hover、mouseenter 或 mouseleave，所以我们留下了 mouseover，但这有这个问题。嗯。
在这种情况下，只需执行我说的替代方案；添加 div 后运行代码。

【解决方案2】：

live() 支持所有事件，包括最新 jQuery 中的自定义事件...

【讨论】：