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

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

---

내 페이지에는 추가해야하는 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 규칙을 클래스 디스플레이 : 인라인 블록 요소에 적용한 다음 디스플레이 : 없음을 적용하는 "숨기기"라는 다른 클래스를 추가했습니다. 내가 .show()요소에 있을 때 인라인으로-display되었습니다.

---

이 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