jQuery fadeIn ekleme

97

Ancak oradaki çözümler benim için işe yaramıyor. Deniyorum:

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

Ancak daha sonra, her öğe eklendiğinde değil, tüm liste bir anda belirir. Gibi görünüyor hide()ve değil fadeIn()uygulanıyor . Bunun yerine onlara nasıl başvurabilirim? Bu da çalışmıyor:$('#thumbnails')<li>

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

Diğer öneriler?

jquery

— mpen
kaynak

199

İlk denemeniz çok yakındır, ancak bunun append()geri döndüğünü unutmayın, #thumbnailsaz önce eklediğiniz öğe değil. Bunun yerine, hide().fadeIn()önce öğenizi oluşturun ve eklemeden önce uygulayın :

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

Bu, <li>vaktinden önce oluşturmak için dolar işlevini kullanır . Bunu daha açık hale getiriyorsa, elbette iki satıra da yazabilirsiniz:

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

Düzenleme: İkinci denemeniz de neredeyse orada, ancak children()bunun yerine kullanmanız gerekiyor filter(). İkincisi yalnızca düğümleri geçerli sorgudan kaldırır; yeni eklenen öğeniz bu sorguda değil, onun yerine bir alt düğümdür.

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

— Ben Blank
kaynak

1

Güzel! Mükemmel çalışıyor. Küçük resmin yüklenmesi bitene kadar solmaya başlamayı nasıl erteleyeceğinizi bilemezsiniz, değil mi?

— mpen

Aklımın ucunda değil, ancak "bir görüntünün yüklenmesi bittiğinde bir işlevi nasıl tetiklerim" ayrı bir soru için kötü bir fikir değildir. ;-)

— Ben Blank

Biliyorum, senin çok akıllı olduğunu düşünmüştüm, bir taşla iki kuş öldürebiliriz: p Ah, Google bir çözüm sağladı. Tekrar teşekkürler :)

— mpen

Bağlantı hala elinizde varsa, tekniği görmeyi çok isterim.

— Ben Blank

1

örnek için teşekkürler! Öyle styledeğil stle :)

— msroot

45

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

— Roman Sklyarov
kaynak

4

Sinsi ... emri tersine çeviriyor. Bunu sevdim.

— mpen

30

Ben Blank'ın cevabı güzel, ama benim için solma, kusurlu. Ekledikten sonra solmayı deneyin :

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

— Derek Illchuk
kaynak

1

Tamamen katılıyorum, bu yaklaşım titremeye neden olacak tek kare oluşturmadan kaçınacak ... sadece biraz daha incelik

— Paul Carroll

Teşekkürler - bu, görünmek üzere olan öğenin düzeninin / konumlandırmasının her ikisini de aynı anda yaparken tutarsız olduğu bir sorunu çözdü.

— frax

3

Dene!

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

— Ogait
kaynak

2

Bunu dene:

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

— Wessam El Mahdy
kaynak

0

İşte benim kullandığım çözüm:

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

Bu uploadify ile çalışır . loadGörüntünün görünmeden önce yüklemeyi bitirmesini beklemek için jquery olayını kullanır . Bunun en iyi yaklaşım olduğundan emin değilim, ama benim için çalıştı.

— mpen
kaynak