표시 방법: 인라인 블록

표시 방법: 인라인 블록

제 페이지에는 보이지 않게 추가해야 하는 돔 노드가 한 묶음(약 30개) 있습니다. 완전히 로드되면 사라집니다.
요소에는 인라인 블록 스타일의 디스플레이가 필요합니다.

jquery.fadeIn() 기능을 사용하고 싶습니다.이를 위해서는 요소에 처음에는 디스플레이가 있어야 합니다: 없음, 처음에는 숨길 규칙.페이드인() 후 코스를 벗어난 요소는 기본 표시: 상속;

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

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

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

필의 좋은 아이디어를 구체화하기 위해, 여기 각 요소의 페이드를 차례로 .faded로 로드하고 애니메이트()로 변환하는 페이드 인()이 있습니다.

이전:

$(".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에게 도움이 되길 바랍니다 :) 더 좋은 방법이 있다면 말해주세요!

마쿠라의 대답은 나에게 통하지 않아서 나의 해결책은

<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(),

요소의 화면표시 값이 inline이면 숨어서 표시하면 요소가 다시 한 번 인라인으로 표시됩니다.

그래서 이 문제에 대한 제 해결책은 클래스 디스플레이에 cs 규칙을 적용하는 것이었습니다: 요소에 인라인 블록을 적용한 다음, 디스플레이를 적용하는 "숨김"이라는 다른 클래스를 추가했습니다: 없음; 내가 이 문제를 해결할 때.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;}하지만 두 가지를 모두 오작동적으로 제거하고 있습니다.

언급URL : https://stackoverflow.com/questions/1091322/how-to-fade-to-display-inline-block