jQuery füge fadeIn an

97

Ähnlich wie: Fadein verwenden und anhängen

Aber die Lösungen dort funktionieren bei mir nicht. Ich versuche:

 $('#thumbnails').append('<li><img src="/photos/t/'+data.filename+'"/></li>').hide().fadeIn(2000);

Aber dann wird die gesamte Liste auf einmal eingeblendet, nicht wenn jedes Element hinzugefügt wird. Es sieht aus wie hide()und fadeIn()wird angewendet , um $('#thumbnails')nicht <li>. Wie würde ich sie dazu bringen, sich stattdessen dafür zu bewerben? Das funktioniert auch nicht:

$('#thumbnails').append('<li stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>').filter(':last').fadeIn(2000);

Andere Vorschläge?

jquery

— mpen
quelle

199

Ihr erster Versuch ist sehr nah, aber denken Sie daran, dass er append()zurückkehrt #thumbnailsund nicht das Element, das Sie gerade hinzugefügt haben. Erstellen Sie stattdessen zuerst Ihr Element und wenden Sie Folgendes an, hide().fadeIn()bevor Sie es hinzufügen:

$('#thumbnails')
    .append($('<li><img src="/photos/t/'+data.filename+'"/></li>')
        .hide()
        .fadeIn(2000)
    );

Dies verwendet die Dollar-Funktion, um die <li>Vorausschau zu konstruieren . Sie können es natürlich auch in zwei Zeilen schreiben, wenn dies klarer wird:

var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>')
    .hide()
    .fadeIn(2000);
$('#thumbnails').append(item);

Bearbeiten: Ihr zweiter Versuch ist auch fast da, aber Sie müssen children()stattdessen verwenden filter(). Letzteres entfernt nur Knoten aus der aktuellen Abfrage. Ihr neu hinzugefügtes Element befindet sich nicht in dieser Abfrage, sondern ist stattdessen ein untergeordneter Knoten.

$('#thumbnails')
    .append('<li stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>')
    .children(':last')
    .hide()
    .fadeIn(2000);

— Ben Blank
quelle

1

Wunderschönen! Funktioniert perfekt. Sie würden nicht zufällig wissen, wie Sie den Start der Überblendung verzögern können, bis auch das Laden der Miniaturansicht abgeschlossen ist, oder?

— Mpen

Nicht aus dem Kopf, aber "Wie kann ich eine Funktion auslösen, wenn ein Bild vollständig geladen ist?" Ist keine schlechte Idee für eine separate Frage. ;-)

— Ben Blank

Ich weiß, ich dachte nur, Sie wären so schlau, dass wir zwei Fliegen mit einer Klappe schlagen könnten: p Na ja, Google hat eine Lösung bereitgestellt.

— Nochmals vielen

Wenn Sie den Link noch zur Hand haben, würde ich gerne die Technik sehen.

— Ben Blank

1

danke für das beispiel! Es ist stylenicht stle :)

— Msroot

45

$('<li><img src="/photos/t/'+data.filename+'"/></li>')
    .appendTo('#thumbnails')
    .hide().fadeIn(2000);

— Roman Sklyarov
quelle

4

Sneaky ... die Reihenfolge umkehren. Ich mag das.

— Mpen

30

Die Antwort von Ben Blank ist gut, aber das Verblassen ist für mich unangenehm. Versuchen Sie, nach dem Anhängen einzublenden:

var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>').hide();
$('#thumbnails').append(item);
item.fadeIn(2000);

— Derek Illchuk
quelle

1

Ich stimme vollkommen zu, dieser Ansatz wird das Rendern eines einzelnen Frames vermeiden, das ein Flackern verursacht ... nur ein bisschen mehr Finesse

— Paul Carroll

Vielen Dank - dies hat einen Fehler für mich behoben, bei dem das Layout / die Positionierung des zu erscheinenden Elements inkonsistent war, wenn beide gleichzeitig ausgeführt wurden.

— Frax

3

Versuch es!

 $('#thumbnails').append(<li> your content </li>);
 $('#thumbnails li:last').hide().fadeIn(2000);

— Ogait
quelle

2

Versuche dies:

$('<li><img src="/photos/t/'+data.filename+'"/></li>').hide().appendTo('#thumbnails').fadeIn(2000);

— Wessam El Mahdy
quelle

0

Hier ist die Lösung, mit der ich gegangen bin:

function onComplete(event, queueID, fileObj, response, info) {
    var data = eval('(' + response + ')');
    if (data.success) {
        $('#file-' + queueID).fadeOut(1000);
        var img = new Image();
        $(img).load(function () { // wait for thumbnail to finish loading before fading in
            var item = $('<li id="thumb-' + data.photo_id + '"><a href="#" onclick="deletePhoto(' + data.photo_id + ')" class="delete" alt="Delete"></a><a href="#" class="edit" alt="Edit"></a><div class="thumb-corners"></div><img class="thumbnail" src="/photos/t/' + data.filename + '" width=150 height=150/></li>');
            $('#thumbnails').append(item.hide().fadeIn(2000));).attr('src', '/photos/t/' + data.filename);
        } else {
            $('#file-' + queueID).addClass('error');
            //alert('error ' + data.errno); // TODO: delete me
            $('#file-' + queueID + ' .progress').html('error ' + data.errno);
        }
    }
}

Dies funktioniert mit uploadify . Es verwendet das loadEreignis von jquery, um zu warten, bis das Bild vollständig geladen ist , bevor es angezeigt wird. Ich bin mir nicht sicher, ob dies der beste Ansatz ist, aber er hat bei mir funktioniert.

— mpen
quelle