도드넷
JAVASCRIPT#43 - jQuery 여러가지 시각효과 본문
It ain't gonna be easy but i won't give up easily either. Bring it!
JAVASCRIPT#43 - jQuery 여러가지 시각효과
1. 숨기기/보이기
- hide()
- show()
- 파라미터로 얼마나 보여줄지 얼마나 사라지게할지 밀리세컨트로 전달가능하다.
2. 페이드 효과
- fadeOut() : 서서히 어두워져서 사라지기
- fadeIn() : 서서히 밝아져서 나타나기
3. 슬라이드
- sildeDown() : 숨겨진 내용을 가리키를 아래로 내리듯 들어내게함.
- sildeUp() : 내용을 가리게를 올리듯 감춤.
* 숨겨졌는지 아는방법
- $(셀렉터).is(":hidden") 가 참을 반환하면 숨김상태이고 아니면 아니다..(?!)
- 숨긴 객체만 선택하려면 $(셀렉터:hidden) 하면될듯.
* 부모 엘레멘트?
- 자신을 감싸고 있는 상위 엘레멘트를 말하면 부모 엘레멘트는 $(셀렉터).parent()로 대신 선택할 수도 있다.
4. 사용자 정의 애니메이션
- animate({변화 css사용}, 시간)
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
정보처리기능사에서 배운 플래그를 여기서 사용하다니! 한 버튼으로 사이즈 늘리고 줄이기 구현함.
반응형
'창고 > JS KING 포니 [중단]' 카테고리의 다른 글
JAVASCRIPT#45 - jQuery .fn .extend() 플러그인 제작기초. (0) | 2016.06.17 |
---|---|
JAVASCRIPT#44 - 자바스크립트 플러그인 적용방법 (1) | 2016.06.16 |
JAVASCRIPT#42 - AJAX란? (0) | 2016.06.15 |
JAVASCRIPT#41 - jQuery 사진경로 변경, select 태그와 change 이벤트! (0) | 2016.06.14 |
JAVASCRIPT#40 - jQuery scroll() 스크롤 이벤트! (0) | 2016.06.14 |
Comments