jQuery append 페이드인
하지만 거기에 있는 해결책들은 저에게 효과가 없습니다.노력중입니다.
$('#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);
다른 제안은?
당신의 첫 시도는 매우 가깝지만, 기억하세요.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 style="display:none"><img src="/photos/t/'+data.filename+'"/></li>')
.children(':last')
.hide()
.fadeIn(2000);
$('<li><img src="/photos/t/'+data.filename+'"/></li>')
.appendTo('#thumbnails')
.hide().fadeIn(2000);
벤 블랭크의 대답은 좋지만, 저는 퇴색하는 것이 결함입니다.다음을 추가한 후에는 페이드 인을 시도합니다.
var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>').hide();
$('#thumbnails').append(item);
item.fadeIn(2000);
해보세요.
$('#thumbnails').append(<li> your content </li>);
$('#thumbnails li:last').hide().fadeIn(2000);
시도해 보기:
$('<li><img src="/photos/t/'+data.filename+'"/></li>').hide().appendTo('#thumbnails').fadeIn(2000);
제가 사용한 솔루션은 다음과 같습니다.
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);
}
}
}
업로디파이에서 작동합니다.jquery's를 사용합니다.load
이미지가 나타나기 전에 로드가 완료될 때까지 기다리는 이벤트입니다.이게 최선의 방법인지는 모르겠지만, 제게는 효과가 있었습니다.
작동 내용:
var infoszoveg = '<div class="kosarba-info" style="display:none"><div class="notice"> A termék bekerült a kosaradba! » </div></div>';
$(infoszoveg).fadeIn(500).appendTo('.kosar-ikon');
$('#target').append($(serverResponseHTMLString).hide().fadeIn(1000));
언급URL : https://stackoverflow.com/questions/978708/jquery-append-fadein
'source' 카테고리의 다른 글
자바스크립트 터치 디바이스용 드래그 앤 드롭 (0) | 2023.09.06 |
---|---|
jQuery로 클릭 이벤트를 하는 동안 키가 눌렸는지 확인하려면 어떻게 해야 합니까? (0) | 2023.09.06 |
jquery $($)너비 () 및 $($).viewport 크기가 조정되지 않은 경우 height(높이)는 다른 값을 반환합니다. (0) | 2023.09.06 |
TortoorGit 아이콘 오버레이가 표시되지 않음 (0) | 2023.09.06 |
온라인 regex 테스터에서 작동하는 MariaDB regex가 SELECT WHERE REgEXP에서 작동하지 않음 (0) | 2023.09.06 |