[javaScript] slideUp(), text(), on(), "click", function()

오늘 지금 이 시간은 일요일 점심시간입니다. 

배고프네요. 정리해볼 내용은 자바스크립트의 기초이자 핵심인 효과 및 애니메이션 메서드입니다.

 

효과 메서드 : 요소를 역동적으로 숨겼다 보이도록 해주는 메서드가 있고, 

                      선택한 요소에 동작을 적용시킬 수 있습니다. 

 

사용법 

$(요소 선택). 효과 메서드(효과 소요 시간, 가속도, 콜백 함수)

 

애니메이션 사용법

$(요소 선택).animate({애니메이션에 적용할 속성과 값}, 가속도, 콜백 함수);

 

이런 모양으로 넣으시면 됩니다.

 

실제 코드를 보시죠!

이 바디를 제가 한 번 다뤄보겠습니다. 

클릭되었을 때, css의 디스플레이 속성을 none으로 줍니다.

 

$().on("click", function(){

});

 

이게 틀이겠죠?

여기는 클릭되었을 때, 슬라이드 업을 1초 동안 하고 숨김 완료 창도 보여주는 코드입니다.

slideUp() 예제라고 할 수 있겠죠?

 

 

여기는 슬라이드 업 및 텍스트를 바꾸는 코드입니다. 

클래스 btn1이 클릭되었을 때, wrap 클래스를 1초 동안 슬라이드 업하고, btn1의 텍스트를 노출로 바꿉니다.

text() 예제입니다. 

 

 

이 코드는 if와 else문을 사용해서 버튼을 클릭할 때마다 숨김일 때는 노출로, 노출일 때는 숨김으로 바꿔줍니다.

 

쉽네요! 

 

한번 해보면 어려운 게 없습니다. 모두 화이팅!

주말엔 놉시다. 화이팅!  평일에 열일하고 주말엔 놀아야지 하면서 코딩하는 개발자는 접니다. 코딩을 노는 것처럼 해봅시다! 개발자 여러분 화이팅!