5. 이벤트, 애니메이션

<이벤트>

**jquery 이벤트**
$("선택자").이벤트(function(event){})
$("선택자").on({이벤트1:동작1,이벤트2:동작2})
    
**event와 관련된 정보**
originalEvent(상세 정보)
target(이벤트의 대상)
preventDefault(이벤트 중지)

<hover() vs. on()>

//hover(): 두 가지 function 지정 가능
    $("#test h3").hover(
            function(){$(this).css({color:$(this).data("color")})}
            ,function(){$(this).css({color:"black"})}
    );
        
//on(): 다수의 이벤트 사용할 때
    $("#test h3").on({
            mouseenter: function(){
                var color=$(this).attr("data-color");
                $(this).css("color",color);
            },
            mouseleave: function(){
                $(this).css("color","");
            },
            click: function(){
                $(this).toggleClass("active");
            }
    });

**jquery effects 함수**

대표적으로 animate({옵션},시간)으로 해당 선택자를 변경시킴.

css()와 비슷하게 style을 변경시켜 애니메이션 효과를 준다.

 

**함수 분류**

 opacity: fadeOut(), fadeIn(), fadeTo() fadeToggle()

 display(none): show(), toggle(), hide()

 display(none) + height: slideUp(), slideDown()

 **Callback Function(=complete)**
 효과 주는 함수들은 모두 콜백 함수(=동작이 완료된 후 실행되는 함수) 가진다.
 ex) show(1000,function)
 ㄴ> 1초 후 보여지는 효과를 진행한 후 function(콜백 함수)을 실행하라!
 
 **animate({styles},duration,easing)**
     easing: 움직임에 변화 줄 수 있는 함수(linear, swing)
     jqueryUi 추가하면 더 많은 easing 사용 가능
     default가 linear이며 변화 속도가 일정
     swing은 천천히 + 일정한 속도 + 천천히로 변한다.
 
 **animate({styles},{options})**
     options의 key
         duration
         easing
         complete: 움직임이 멈춘 후 실행될 콜백함수
         step: 움직임 각 스텝별로 실행될 함수
         queue: 애니메이션 효과는 순서대로 발생, 만약 false면 동시에 같이 움직임 일어남
         specialEasing: CSS 속성의 하나 이상을 특별한 효과로 처리(added 1.4)
 
 **stop(): 효과 멈추기**
 $(선택자).stop(stopAll,goToEnd)
 stopAll : chain이 있다면 멈춰라.
 goToEnd : duration 효과만 없애고, 변경된 style은 그대로 적용하라
 
 stop() : 하나의 animate()만 멈추고 chain은 실행한다.
 stop(true) : 모든 효과(chain 포함) 멈춘다.
 stop(true, true) : 모든 효과 멈추지만 실행 중이던 효과 style은 적용해라
 stop(false, true) : 실행 중이던 효과 멈추고 style 적용 후 chain 실행한다.

<예제: 박스 움직이기>

//1초 후 box를 숨김/나타냄(toggle)
$("#toggleAni").click(function(){
    $("#test .box").animate({width:"toggle",height:"toggle"},1000);
});
 
//0.5초 후 너비&폰트사이즈&투명도 높임
$("#biggerBox").click(function(){
    $("#test .box").css({width:"+=50px"})
    .animate({fontSize:"+=20px",opacity:"-=0.1"},500);
});
 
//2초 후 오른쪽으로 이동시키고, 투명도 매우 높임
$("#moveBox").click(function(){
    $("#test .box").animate({left:"+=100px"},2000)
    .animate({opacity:"-=0.5"},2000);
});

**Jquery-ui의 effects 기능 활용시**

<script>
//effect()는 animate와 같은 효과
    $("#effectTypes").change(function(){
        //$("#test .box").effect(this.value,2000,function(){$(this).css("display","")});
        $("#test .box").effect({
            effect: this.value,
            duration:2000,
            complete:function(){this.style=""; $(this).attr("style","")}
        });
    });
    
    $("#toggleBox").click(function(){
        $("#test .box").toggle({effect:"fold",duration:2000,easing:"easeOutElastic"});
    });
    
    $("#moveBox").click(function(){
        $("#test .box").animate({left:"+=200px"},2000,"easeOutElastic");
    });
    
    $("#moveBox2").click(function(){
        $("#test .box").toggleClass("move",2000,"easeOutElastic");
    });
</script>