jQuery 이벤트와 효과

■ jQuery가 지원하는 이벤트 함수

$(selector).click(function)  :  클릭 이벤트

$(selector).dblclick(function)  :  더블클릭 이벤트

$(selector).focus(function)  :  포커스 이벤트

$(selector).mouseover(function)  :  마우스 오버 이벤트

  

■ jQuery가 지원하는 효과

$(selector).hide()  :  선택된 요소를 감춤

$(selector).show()  :  선택된 요소를 보임

$(selector).toggle()  :  선택된 요소를 보였다 감추기를 반복

$(selector).slideDown()  :  선택된 요소를 슬라이드 다운 방식으로 이동

$(selector).slideUp()  :  선택된 요소를 슬라이드 업 방식으로 이동 

$(selector).slideToggle()  :  선택된 요소를 슬라이드 업 - 다운을 반복함

$(selector).fadeIn()  :  선택된 요소를 페이드 인 시킴

$(selector).fadeOut()  :  선택된 요소를 페이드 아웃 시킴

$(selector).fadeTo()  :   선택된 요소의 페이드를 아웃의 opacity 값을 지정할 수 있음

$(selector).animation()  :  선택된 요소의 애니메이션 효과를 줌

  

 

animation() 효과 예제

<script type="text/javascript">
$( document ).ready( function() {
    $( "#start" ).click( function() {
        $("#box").animate({left:"100px"},"slow");
        $("#box").animate({fontSize:"3em"},"slow");
    });
});
</script> 

 

애니매이션 효과는 jQuery 함수들이 대부분 파라미터로 "slow", "fast", "normal" 또는 밀리세컨드로 실행 속도를 지정할 수 있기 때문에 효용성에 문제가 있을 수 있다. 하지만 연속적으로 수행하기에 animation() 효과를 사용하는 것이 좋다. 일반적인 jQuery() 함수들이 콜백 함수를 지원하지만 콜백 함수를 따로 작성하는 것이 더 코드를 복잡하게 할 것 같다.

 

 

※ 콜백(callback)

 콜백이란 호출될 함수를 알려주어 다른 프로그램 다른 모듈에서 함수를 호출하게 하는 방법으로 특정시간 또는 메시지가 발생했을 때 함수를 호출할 수 있다. jQuery 에서는 애니매이션 효과가 끝나면 콜백함수를 호출한다.

 

jQuery 콜백 함수의 잘못된 예

 

$("button").click(function(){
    $("p").hide(1000); alert("The paragraph is now hidden");
});

 

위의 경우 클릭 이벤트가 발생하면 hide() 효과와 callback 함수인 경고 팝업창을 같이 출력하게 된다. 이는 잘못된 사용 방법이다. 

 

jQuery 콜백 함수의 올바른 예

 

$("button").click(function(){
    $("p").hide(1000, my_alert);
});

function my_alert() {
    alert("The paragraph is now hidden");
}

 

위와 같이 작성하면 hide() 효과가 끝나면 경고 팝업창을 출력합니다. 콜백 파라미터는 함수이름을 통한 호출을 해야 합니다.