jQuery 추가 페이드 인

97

그러나 거기에있는 해결책은 나를 위해 일하지 않습니다. 노력하고있어:

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

그러나 각 항목이 추가 될 때가 아니라 전체 목록이 한 번에 사라집니다. 그것은 모양 hide()과fadeIn() 에 적용되고 $('#thumbnails')아닙니다 <li>. 대신 지원하도록하려면 어떻게해야합니까? 이것은 작동하지 않습니다.

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

다른 제안?

jquery

— mpen
소스

199

첫 번째 시도는 매우 가깝지만 방금 추가 한 항목 append()이 아니라을 반환 한다는 점을 기억하세요 #thumbnails. 대신 항목을 먼저 구성하고 hide().fadeIn()추가하기 전에 적용하십시오 .

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

이것은 달러 함수를 사용하여 <li>미리 생성합니다 . 물론 그것이 더 명확하다면 두 줄로 쓸 수도 있습니다.

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

편집 : 두 번째 시도도 거의 다 왔지만 children()대신 filter(). 후자는 현재 쿼리에서 노드 만 제거합니다. 새로 추가 된 항목은 해당 쿼리에 없지만 대신 자식 노드입니다.

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

— 벤 블랭크
소스

1

아름다운! 완벽하게 작동합니다. 썸네일로드가 완료 될 때까지 페이드 시작을 지연하는 방법을 알지 못했을 것입니다.

— mpen 2009-06-11

머릿속에서 벗어나지 않지만 "이미지로드가 완료되면 함수를 트리거하는 방법"은 별도의 질문에 대한 나쁜 생각이 아닙니다. ;-)

— Ben Blank

알아, 난 그냥 당신이 너무 똑똑해서 우리가 하나의 돌로 두 마리의 새를 죽일 수 있다고 생각했습니다 : p 오, 구글이 해결책을 제공했습니다. 다시 한 번 감사드립니다 :)

— mpen

여전히 링크가 있으면이 기술을보고 싶습니다.

— Ben Blank

1

예를 들어 주셔서 감사합니다! 그것은이 style없습니다 stle :)

— msroot

45

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

— Roman Sklyarov
소스

4

몰래 ... 명령을 뒤집는 중입니다. 나는 그것을 좋아한다.

— mpen 2011-06-30

30

Ben Blank의 대답 은 좋지만, 저에게는 페이딩이 이상합니다. 추가 한 후 페이드 인을 시도 하십시오.

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

— 데릭 일축
소스

1

나는 ...이 방법은 하나의 프레임이 깜박임을 일으킬 것이다 렌더링 피할 완전히 동의 단지 좀 더 기교가

— 폴 캐롤

감사합니다.이 두 가지 작업을 동시에 수행 할 때 나타나는 항목의 레이아웃 / 위치가 일치하지 않는 문제를 수정했습니다.

— frax

3

시도 해봐!

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

— 오가이 트
소스

2

이 시도:

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

— 웨삼 엘 마디
소스

0

내가 함께했던 해결책은 다음과 같습니다.

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

이것은 uploadify 와 함께 작동합니다 . jquery의 load이벤트를 사용 하여 이미지가 나타나기 전에로드가 완료 될 때까지 기다립니다. 이것이 최선의 접근 방식인지 확실하지 않지만 저에게 효과적이었습니다.

— mpen
소스