[제이쿼리(jQuery)] lesson 6

지난번에 이어서 효과를 계속보도록하자~.

제이쿼리의 효과는 show/hide 뿐만아니라 fade, slide 또는 스스로 정의하여 꾸미는 animate 가 있다.

아래 표에서 버튼 클릭으로 간단히 비교해보도록 하자.

show/hide	fade	slide

syntax> fade

$(셀렉터).fadeIn(속도, 콜백함수)

$(셀렉터).fadeOut(속도, 콜백함수)

$(셀렉터).fadeToggle(속도, 콜백함수)

$(셀렉터).fadeTo(속도, 투명도, 콜백함수)

속도는 "slow", "fast", "normal" 의 문자열 또는 밀리세컨드(1/1000초) 단위의 숫자를 입력하면 된다.

slow 는 0.6초 , normal 은 0.4초, fast 는 0.2초 이다.

콜백함수는 효과가 완료된 후에 호출할 함수가 있다면 입력한다.

특이하게 fadeTo의 경우 최종 결과의 투명도를 설정할 수 있다.

 1 이 100% 보임, 0.3는 30프로 형태로 소숫점으로 지정이 된다.

예시>

$(셀렉터).fadeIn()        // 0.4 초 동안 fadeIn 한다.

$(셀렉터).fadeIn(2000)  // 2초 동안 fadeIn 한다.

$(셀렉터).fadeOut("fast") // 0.2 초 동안 fadeOut 한다.

$(셀렉터).fadeOut("slow", function(){

         alert("fadeIn 완료");

})  // 0.2초동안 fadeIn 하고 완료시에 콜백함수를 호출한다.

$(셀렉터).fadeToggle() // show/hide의 토글과 같은 효과로 fadeIn 과 fadeOut 을 전환시킨다. 설정된 값이 없기 때문에 시가은 0.4초이다.

$(셀렉터).fadeTo(500, 0.4)  //  0.5초 동안 투명도를 40%로 변경한다.

syntax> slide

$(셀렉터).slideDown(속도, 콜백함수) // slide효과로 보임 상태가 됨

$(셀렉터).slideUp(속도, 콜백함수)  // slide효과로 숨김 상태가 됨

$(셀렉터).slideToggle(속도, 콜백함수)

syntax> animate

$(셀렉터).animate({변경할속성목록}, 속도, 콜백함수);

변경할 속성 목록은  { 이름 : 값 , 이름 : 값 ..} 형태이다

예시

$(셀렉터).animate({ width : '300px' });  //특정 속성에 최종 변경값을 세팅

 

$(셀렉터).animate({ height : '300px', width : '+=100px', opacity : '0.5' }); 

// 다중값 변경 및 예시의width 와 같이 현재값에 값을 더하거나 뺄수 있음

$(셀렉터).animate({ height : 'show' });  // show, hide, toggle 을 설정할 수 있음

$(셀렉터).animate({ width : '300px' } , 1000 );  // width 300px 로 1초동안 변경

$(셀렉터).animate({ width : '300px' } , 'slow' , function(){

alert("animate 완료");

});  // width 300px 로 0.6초동안 변경 후 alert 창 도시

기타 특정 셀렉터에 여러개의 animate 를 연속으로 세팅한 경우 각 animate 은 순서대로 하나씩 완료후 다음 animate 가 작동함

var panel = $('.panel');

panel.animate({ width : '300px' });          //  (1)

panel.animate({ opacity: '0.5' }, 'slow');  // (2)

panel.animate({ width : '+=100px' });      //  (3)

이런 식으로 연속적으로 animate 를 사용한 경우   

 (1) 동작 -> (1)완료후 (2)동작 -> (2)완료후 (3)동작

이상~