Javascript-动画在新动画启动时停止

我在一个页面上有一个UL，点击一个按钮，我就添加了一个li并将其淡入。这适用于单次单击。但是，单击按钮两次后，第一个动画立即停止，第二个动画完成

我设置了一个测试页面来演示这一点：（测试页面仅在FF中进行了测试）

在setOpacity函数中添加一个console.log作为elem的值，似乎表明javascript按照预期工作——两个li都达到了opacity=1。然而，第一个li似乎是一个与实际DOM不协调的片段

作为一种学习体验，我特意尝试在没有普通图书馆的情况下让它工作

非常感谢您的帮助。。。 蚂蚁

永远不要这样做

您将获取

elem

（growlist）的DOM内容，将其序列化为新的HTML字符串，预先添加一些HTML内容，并将连接的HTML解析回全新的DOM节点。这将丢失所有非HTML可序列化内容，例如表单字段值、事件处理程序和JavaScript引用。动画仍然有一个对旧HtmleElement节点的引用，该节点不再位于DOM中，已由新解析的-

内容

元素替换

实际上，您通常希望完全避免生成HTML字符串：

growl = '<li id="' + gid + '" class="' + className + ' growl" style="display: none"><span class="close" title="close">x</span><h2>' + heading + '</h2><div class="growlContent">' + content + '</div></li>',

这相当冗长，但编写一个助手函数来减少键入是很容易的，例如：

gl.insertBefore(el('li', {id: gid, className: className), [
    el('span', {className: 'close', title: 'close'}, 'x'),
    el('h2', {}, heading),
    el('div', {className: 'growlContent'}, content)
]), gl.firstChild);


// Element creation convenience function
//
function el(tag, attrs, content) {
    var el= document.createElement(tag);
    if (attrs!==undefined)
        for (var k in attrs)
            if (attrs.hasOwnProperty(k))
                el[k]= attrs[k];
    if (content!==undefined) {
        if (typeof(content)==='string')
            el.appendChild(document.createTextNode(content));
        else
            for (var i= 0; i<content.length; i++)
                el.appendChild(content[i]);
    }
    return el;
};

gl.insertBefore（el（'li'，{id:gid，className:className）[
el（'span'，{className:'close'，title:'close'}，'x'），
el（'h2'，{}，标题），
el（'div'，{className:'growlContent'}，content）
])，gl.第一个孩子）；
//元素创建便利功能
//
功能el（标签、属性、内容）{
var el=document.createElement（标记）；
如果（属性！==未定义）
for（属性中的变量k）
如果（属性hasOwnProperty（k））
el[k]=attrs[k]；
如果（内容！==未定义）{
if（类型（内容）=='string'）
el.appendChild（document.createTextNode（content））；
其他的
对于（var i=0；iHi Bobince，谢谢你的回答，但我认为你有点忽略了这一点-我没有故意使用jQuery或任何其他库。至于全局变量，我使用逗号分隔声明，因此它们将在范围内。该页面只是一个测试页面来演示问题，而不是最终的方法，还有值从未存储在数据库中或实际发布，因此即使它是最终代码，唯一易受攻击的人将是当前用户（有点像自杀式xss攻击：）。但对实际问题以及如何以非jquery方式修复它有什么想法吗？哎呀！抱歉，我看到了“动画”和“预结束”我的大脑立即切换到jQuery模式。我甚至不喜欢jQuery！这就是这个痴迷的地方的诅咒！更新为包含简单的JS版本。我知道你现在用逗号做了什么，但我不推荐这样做：快速编辑/重新排列行并丢失
var
。例如在页面本身的
标题中
和
content
都是偶然的全局变量，因为也有与
id
​s、 尝试分配给它们将导致IE中出现异常（这会使
id
​如果在多行上使用var逗号，通常的做法是缩进后续行，以显示它们是同一语句的一部分；我个人更喜欢单独的
var
​谢谢你回复我。试着用你的方式添加，瞧：）非常感谢，现在把剩下的整理好。
var span= document.createElement('span');
span.className=span.title= 'close';
span.appendChild(document.createTextNode('x'));
var h2= document.createElement('h2');
h2.appendChild(document.createTextNode(heading));
var div= document.createElement('div');
div.className= 'growlContent';
div.appendChild(document.createTextNode(content))

var li= document.createElement('li');
li.id= gid;
li.className= className;
li.appendChild(span);
li.appendChild(h2);
li.appendChild(div);

gl.insertBefore(li, gl.firstChild);

gl.insertBefore(el('li', {id: gid, className: className), [
    el('span', {className: 'close', title: 'close'}, 'x'),
    el('h2', {}, heading),
    el('div', {className: 'growlContent'}, content)
]), gl.firstChild);


// Element creation convenience function
//
function el(tag, attrs, content) {
    var el= document.createElement(tag);
    if (attrs!==undefined)
        for (var k in attrs)
            if (attrs.hasOwnProperty(k))
                el[k]= attrs[k];
    if (content!==undefined) {
        if (typeof(content)==='string')
            el.appendChild(document.createTextNode(content));
        else
            for (var i= 0; i<content.length; i++)
                el.appendChild(content[i]);
    }
    return el;
};