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


98

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

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

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

답변:


39

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


이 솔루션을 더 좋아하고 CSS를 JS에서 제외합니다.
joshuadelange

14
정말 @joshuadelange, 불투명도는 CSS입니다
로이

요소를 표시하거나 숨겨야하는 엔지니어링 프로세스에 초점을 맞춘 +1입니다.
klewis

233

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


5
이것은 확실히 더 나은 대답입니다.
Jason

25
좋은 대답입니다! 더 나은, 당신이 당신이 무엇을 당신의 CSS에 가지고 기본값으로 비워 둘 수 있습니다 :$("div").fadeIn().css("display","");
브랜든 더럼

1
이것은 정말로 받아 들여지는 대답이어야합니다. 기존에 받아 들여진 대답은 더 많은 의견입니다.
Sinister Beard

$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });페이드 인이 완료되면 display : inline-block이 완료되었는지 확인합니다.
Simon

그것은 나를 위해 작동하지 않습니다 ... 클래스를 사용하여 초기 표시 스타일이 없음으로 설정된 div에 적용되었습니다. 요소를 살펴보면 몇 밀리 초 동안 fadeIn을 호출 한 직후에 스타일에 인라인 블록이 있고 스타일이 블록으로 설정됩니다. 사이먼의 제안으로 효과가 좋지 않습니다.
페이드 인

11

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에 도움이되기를 바랍니다. :) 더 좋은 방법이 있다면 알려주세요!


9

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


2

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

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

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


나는 이것이 당신이 설정 #el{display:inline-block;display:none;}하고 실행할 때도 작동해야한다고 가정하고 $('#el').fadeIn();인라인 블록을 얻습니다. 하지만 그렇지 않습니다.
Fanky

0

이것은 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;}

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.