Javascript - l'animation s'arrête quand une nouvelle est commencée

Question

J'ai un UL sur une page et sur le clic d'un bouton j'ajoute un li et l'évanouit dedans. Cela fonctionne très bien pour les clics simples. Cependant, lorsque le bouton est cliqué deux fois, la première animation s'arrête immédiatement et la seconde s'achève.

J'ai installé une page de test pour démontrer: http://anttears.co.uk/test (la page de test a été testé en FF seulement)

Mettre un console.log dans la fonction setOpacity pour la valeur de élém semble montrer le javascript travail comme prévu - les deux l'opacité de li = 1. Cependant, le premier li semble être un fragment dissasoiated avec le DOM réel.

J'essaie délibérément de faire fonctionner cela sans les bibliothèques habituelles, comme une expérience d'apprentissage.

Toute aide appréciée greatfully ... Ant

Answer 1

this.prepend = function(string, elem) { 
    var content = elem.innerHTML; 
    content = string + content; 
    elem.innerHTML = content; 
} 

jamais ce faire.

Vous prenez le contenu DOM du elem (le growlList), le sérialisant en une nouvelle chaîne HTML, en ajoutant un peu de contenu HTML et en analysant le code HTML joint dans de nouveaux nœuds DOM. Cela entraîne la perte de tout contenu non sérialisable au format HTML, tel que les valeurs de champs de formulaire, les gestionnaires d'événements et les références JavaScript. L'animation a toujours une référence à l'ancien noeud HTMLElement, qui n'est plus dans le DOM, ayant été remplacé par des éléments nouvellement analysés à partir de content.

En effet, vous voulez généralement pour éviter de générer des chaînes HTML du tout:

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>', 

Tous unescaped caractères HTML spéciaux d'ce contenu et vous avez cassé votre balisage au mieux. Au pire, les données proviennent d'un utilisateur malveillant et vous vous êtes donné un trou de sécurité XSS.

Au lieu de cela, utiliser des méthodes de style DOM, par exemple:

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); 

Ceci est assez verbeux, mais il est facile d'écrire une fonction d'aide pour réduire la saisie, par exemple:

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; 
};