관리 메뉴

도드넷

JAVASCRIPT#43 - jQuery 여러가지 시각효과 본문

창고/JS KING 포니 [중단]

JAVASCRIPT#43 - jQuery 여러가지 시각효과

도드! 2016. 6. 16. 05:08
반응형



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 );




정보처리기능사에서 배운 플래그를 여기서 사용하다니! 한 버튼으로 사이즈 늘리고 줄이기 구현함.


포니포니2 리사이징 애니메이션.zip







반응형
Comments