Wie animiere ich mehrere dynamisch generierte DOM-Elemente?

-1

Dies kann nützlich sein, um zu sehen, woher ich komme. Jquery nested each problem Wie animiere ich mehrere dynamisch generierte DOM-Elemente?

Ich füge divs auf die Seite mit diesem Code:

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

html nur eine Zeichenfolge ist etwas Text und einen Anker enthält.

Ich versuche, die neuen divs zu animieren - es gibt mehrere Divs mit der ID #Entry.

Hier ist mein Code:

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

Die oben ist in meiner jQuery(document).ready(function(){ } Funktion, wenn es ankommt.

Quelle

2009-06-17 Dan.StackOverflow

Vor allem, wenn Sie mehr als 1 <div> mit dieser ID hinzufügen, tun Sie es falsch. id Attribute sollten in einem Dokument eindeutig sein (müssen). Mit mehr als 1 Element mit der gleichen id wird Javascript drunter und drüber gehen, weil es nicht passieren soll. Es wäre das Äquivalent von zwei Personen mit der gleichen Sozialversicherungsnummer. :) Wenn es um Gruppen von Elementen geht, ist es üblich und am besten, ihnen allen eine Klasse zu geben und sie auf diese Weise auszuwählen.

Vergangenheit, sollten Sie in die live Funktion schauen, die das tut, was Sie wollen. Wenn Sie einen Codeabschnitt in Ihrem Dokument bereit ausführen, wird es im Wesentlichen gegen den aktuellen-Status des Dokuments ausgeführt. Mit anderen Worten, nur Elemente, die zu diesem Zeitpunkt existieren (die mit dem bereitgestellten Selektor übereinstimmen), werden an das von Ihnen angegebene Ereignis gebunden. Die live Funktion wurde erstellt, um dies zu umgehen. Eine andere Lösung wäre, den Bindungscode erneut auszuführen, nachdem Sie eine neue <div> hinzugefügt haben, aber das ist nicht so sauber wie nur live, die die mouseover und mouseout Ereignisse unterstützt, die Sie benötigen, um die zu tun.

Quelle

2009-06-17 22:28:01

So lebt nicht schweben unterstützen. Es unterstützt Mouseover, Mouseout. Allerdings habe ich einen Anker in meinem div, also wenn ich mich entlang meines Ankers bewege, registriert er ein mouseover-Ereignis, das aufbläht, so dass ich ein Flimmern bekomme, das lächerlich ist. Es scheint, dass viele Menschen in dieser misslichen Lage von einer Google-Suche sind, Live unterstützt nicht Hover, Mouseenter oder Mouselave, so dass wir mit Mouseover verlassen werden, aber das hat dieses Problem. Hmm. –

In diesem Fall, tun Sie einfach die Alternative, die ich sagte; Führen Sie den Code aus, nachdem Sie das div hinzugefügt haben. –

Live() unterstützt alle Veranstaltungen, darunter benutzerdefinierte Ereignisse in der aktuellen jQuery ...

Quelle

2010-04-06 15:44:40 Anentropic

Wie animiere ich mehrere dynamisch generierte DOM-Elemente?

Antwort

Verwandte Themen