jQuery dołącz fadeIn

97

Ale rozwiązania tam nie działają. Próbuję:

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

Ale potem cała lista pojawia się od razu, a nie po dodaniu każdego elementu. Wygląda na to, hide()i fadeIn()są stosowane do $('#thumbnails')nie <li>. Jak mam skłonić ich, aby zamiast tego zastosowali się do tego? To też nie działa:

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

Inne sugestie?

jquery

— mpen
źródło

199

Twoja pierwsza próba jest już bardzo bliska, ale pamiętaj, że append()wraca #thumbnails, a nie przedmiot, który właśnie do niego dodałeś. Zamiast tego skonstruuj najpierw swój przedmiot i zastosuj hide().fadeIn()przed dodaniem:

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

Używa funkcji dolara do konstruowania z <li>wyprzedzeniem. Oczywiście możesz też zapisać to w dwóch wierszach, jeśli to sprawia, że jest to bardziej zrozumiałe:

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

Edycja: Twoja druga próba również jest prawie gotowa, ale musisz użyć children()zamiast filter(). Ta ostatnia usuwa tylko węzły z bieżącego zapytania; twojego nowo dodanego elementu nie ma w tym zapytaniu, ale zamiast tego jest węzłem podrzędnym.

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

— Ben Blank
źródło

1

Piękny! Działa świetnie. Nie wiesz, jak opóźnić rozpoczęcie zanikania do czasu zakończenia ładowania miniatury, prawda?

— mpen

Nie od razu, ale „jak uruchomić funkcję po zakończeniu ładowania obrazu” nie jest złym pomysłem na osobne pytanie. ;-)

— Ben Blank

Wiem, pomyślałem, że jesteś tak mądry, że możemy upiec dwie pieczenie na jednym ogniu: p No cóż, Google dostarczyło rozwiązanie.

— Jeszcze

Jeśli nadal masz pod ręką link, chciałbym zobaczyć tę technikę.

— Ben Blank,

1

dzięki za przykład! Tak stylenie jest stle :)

— msroot

45

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

— Roman Sklyarov
źródło

4

Podstępne ... odwracanie kolejności. Lubię to.

— mpen

30

Odpowiedź Bena Blanka jest dobra, ale dla mnie zanikanie jest błędne. Spróbuj zanikać po dodaniu:

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

— Derek Illchuk
źródło

1

Zgadzam się całkowicie, takie podejście pozwoli uniknąć renderowania jednej klatki, które spowoduje migotanie ... tylko trochę więcej finezji

— Paul Carroll

Dzięki - naprawiło to dla mnie usterkę polegającą na tym, że układ / pozycjonowanie przedmiotu, który miał się pojawić, było niespójne, gdy robiłem je oba w tym samym czasie.

— frax

3

Spróbuj!

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

— Ogait
źródło

2

Spróbuj tego:

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

— Wessam El Mahdy
źródło

0

Oto rozwiązanie, które wybrałem:

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

Działa z uploadify . Używa loadzdarzenia jquery, aby poczekać na zakończenie ładowania obrazu, zanim się pojawi. Nie jestem pewien, czy to najlepsze podejście, ale zadziałało.

— mpen
źródło