답변:
$("div").fadeIn().css("display","inline-block");
$("div").fadeIn().css("display","");
$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });
페이드 인이 완료되면 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()
요소에 있을 때 인라인으로 표시되었습니다.
#el{display:inline-block;display:none;}
하고 실행할 때도 작동해야한다고 가정하고 $('#el').fadeIn();
인라인 블록을 얻습니다. 하지만 그렇지 않습니다.
이것은 display:none
CSS 로 미리 설정 한 경우에도 작동합니다 . 사용하다
$('#element').fadeIn().addClass('displaytype');
(또한 $('#element').fadeOut().removeClass('displaytype');
)
CSS 설정 :
#element.displaytype{display:inline-block;}
설정 fadeIn()
하면 마지막 규칙 만 제거 할 수 있도록 작동해야 한다고 생각하는 해결 방법이라고 생각 하지만 둘 다 제대로 제거되지 않습니다.display:none
#element{display:inline-block;display:none;}