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

jQuery dołącz fadeIn

Odpowiedzi: