[jquery] 페이드 표시 방법 : 인라인 블록

내 페이지에는 보이지 않게 추가해야하는 dom 노드 (약 30 개)가 있으며 완전히로드되면 페이드 인됩니다.
요소에는 디스플레이 : 인라인 블록 스타일이 필요합니다.

jquery .fadeIn () 함수를 사용하고 싶습니다. 이를 위해서는 요소에 처음에 디스플레이가 있어야합니다. 처음에 그것을 숨기는 규칙. fadeIn () 이후의 요소들은 기본 디스플레이를 갖습니다 : inherit;

상속 이외의 표시 값으로 페이드 기능을 사용하려면 어떻게해야합니까?

jQuery의 애니메이션 기능을 사용하여 불투명도를 직접 변경하여 디스플레이에 영향을 주지 않을 수 있습니다 .

$("div").fadeIn().css("display","inline-block");

Phil의 좋은 아이디어를 구체화하기 위해 다음은 .faded 클래스를 사용하여 각 요소에 페이드를로드하는 fadeIn ()을 animate ()로 변환합니다.

낡은:

$(".faded").each(function(i) {
    $(this).delay(i * 300).fadeIn();
});

새로운:

$(".faded").each(function(i) {
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});

저와 같은 다른 jQuery newb에 도움이되기를 바랍니다. 🙂 더 좋은 방법이 있다면 알려주세요!

Makura의 대답이 저에게 효과가 없었기 때문에 내 해결책은

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hide즉시 적용 display: none되지만 그 전에는 후속 애니메이션 호출에 의해 복원 될 jQuery 데이터 캐시에 현재 표시 값을 저장합니다.

따라서 div시작은 정적으로 display: none. 그런 다음 inline-block다시 페이드 인되도록 설정 되고 즉시 숨겨집니다.inline-block

에 대한 jQuery 문서 에 따르면 .show(),

요소의 표시 값이 인라인이면 숨겨지고 표시되며 다시 한 번 인라인으로 표시됩니다.

그래서이 문제에 대한 나의 해결책은 css 규칙을 class display : inline-block 요소에 적용한 다음 display : none을 적용하는 “hide”라는 다른 클래스를 추가했습니다. 내가 .show()요소에 있을 때 인라인으로 표시되었습니다.

이것은 display:noneCSS 로 미리 설정 한 경우에도 작동합니다 . 사용하다

$('#element').fadeIn().addClass('displaytype');

(또한 $('#element').fadeOut().removeClass('displaytype');)

CSS 설정 :

#element.displaytype{display:inline-block;}

설정 fadeIn()하면 마지막 규칙 만 제거 할 수 있도록 작동해야 한다고 생각하는 해결 방법이라고 생각 하지만 둘 다 제대로 제거되지 않습니다.display:none#element{display:inline-block;display:none;}