페이드 인 및 추가 사용

페이드 인 및 추가 사용

---

내 페이지에 JSON 데이터를로드하고 appendTo ()를 사용하고 있지만 결과, 아이디어를 페이드 인하려고합니다.

$("#posts").fadeIn();
$(content).appendTo("#posts");

문서에서 append와 appendTo 사이에 차이가 있음을 알았습니다.

나는 이것을 시도했다.

$("#posts").append(content).fadeIn();

나는 그것을 얻었다, 위의 트릭을했다!

하지만 내 JSON 값 중 하나로 "정의되지 않음"을 얻습니다.

---

콘텐츠를 추가하기 전에 숨기고 fadeIn 메서드를 여기에 연결하면 원하는 효과를 얻을 수 있습니다.

// Create the DOM elements
$(content)
// Sets the style of the elements to "display:none"
    .hide()
// Appends the hidden elements to the "posts" element
    .appendTo('#posts')
// Fades the new content into view
    .fadeIn();

---

나는 당신이 겪고있는 문제를 완전히 이해했는지 모르겠지만 다음과 같은 것이 작동합니다.

HTML :

<div id="posts">
  <span id="post1">Something here</span>
</div>

자바 스크립트 :

var counter=0;

$.get("http://www.something/dir",
    function(data){
        $('#posts').append('<span style="display:none" id="post' + counter + ">" + data + "</span>" ) ;
        $('#post' + counter).fadeIn();
        counter += 1;
    });

기본적으로 콘텐츠의 각 부분 (각 "포스트")을 범위로 래핑하고 해당 범위의 표시를 없음으로 설정하여 표시되지 않도록 한 다음 페이드 인합니다.

---

이것은 내가 생각하는 당신의 문제를 해결할 것입니다.

$('#content').prepend('<p>Hello!</p>');
$('#content').children(':first').fadeOut().fadeIn();

대신 추가를 수행하는 경우 대신 : last 선택기를 사용해야합니다.

---

코드가 선형 적으로 실행되지 않는다는 점을 알아야합니다. 애니메이션 된 항목은 애니메이션을 수행하기 위해 코드 실행을 중단 한 다음 반환 할 것으로 예상 할 수 없습니다.

   commmand(); 
   animation(); 
   command();  

This is because the animation uses set timeout and other similar magic to do its job and settimeout is non-blocking.

This is why we have callback methods on animations to run when the animation is done ( to avoid changing something which doesn't exist yet )

   command(); 
   animation( ... function(){ 
      command(); 
   });

---

$(output_string.html).fadeIn().appendTo("#list");

---

CSS에 다음이 정의되어 있다고 가정합니다.

.new {display:none} 

자바 스크립트는 다음과 같아야합니다.

$('#content').append('<p class='new'>Hello!</p>');
$('#content').children('.new').fadeIn();
$('#content').children.removeClass('new');
$('#content').children('.new').hide();

---

첫 번째는 수신 된 데이터를 jQuery 객체로 변환하는 것입니다. 둘째, 즉시 숨 깁니다. 셋째, 대상 노드에 추가하십시오. 그리고 결국 fadeIn처럼 필요한 애니메이션을 명확하게 사용할 수 있습니다. :)

jNode = $("<div>first</div><div>second</div>");
jNode.hide();
$('#content').append(jNode);
jNode.fadeIn();

---

나는 이것에 대해 비싸다.

$("dt").append(tvlst.ddhtml);
$("dd:last").fadeIn(700);

---

나는 당신이 말한 것을 트릭을 시도했지만 작동하지 않습니다. 다음 코드로 작동했습니다.

$("div").append("content-to-add").hide().fadeIn();

참고 URL : https://stackoverflow.com/questions/327682/using-fadein-and-append