jQuery - fadeIn()

아이콘, 이미지, 문자열 등이 나타나고 사라지도록 할 때 흔히 css의 display 속성을 none ↔ block 으로 변경하여 처리를 한다.

이 때 강조의 목적으로 애니메이션 효과를 주고자 fadeIn(), fadeOut() 함수를 사용한다.

 

그런데 fadeIn() 함수는 동작이 완료된 후, 해당 객체의 display 속성을 inline 으로 변경해 버린다.

block 또는 inline-block 이 되었어야 한다면 디자인 문제가 발생한다.

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

이렇게 하면 애니메이션이 끝난 후 자연스럽게 inline-block 이 되도록 할 수 있다.

 

 

참고 링크.

1. http://stackoverflow.com/questions/1091322/how-to-fade-to-display-inline-block
2. http://api.jquery.com/fadein/