jQuery 제이쿼리의 이펙트 방식 II

[jQuery Slide - slideDown, slideUp, slideToggle]

jQuery slide 메소드는 선택한 엘리먼트의 높이를 점차적으로 변경시킵니다.

jQuery의 slide 메소드에는 다음과 같은 것들이 있습니다.

- $(selector).slideDown(speed,callback)

- $(selector).slideUp(speed,callback)

- $(selector).slideToggle(speed,callback)

speed 변수에는 "slow", "fast", "normal", 또는 밀리초의 값이 들어갑니다.

callback 변수는 이 함수가 실행되고 난 직후에 실행되는 함수의 이름이 들어갑니다.

예 - slideDown()

$(".flip").click(function(){

$(".panel").slideDown();

});

{적용예제보기 6-1}

예 - slideUp()

$(".flip").click(function(){

$(".panel").slideUp();

});

{적용예제보기 6-2}

예 - slideToggle()

$(".flip").click(function(){

$(".panel").slideToggle();

});

{적용예제보기 6-3}

 

 

[jQuery Fade - fadeIn, fadeout, fadeTo]

jQuery fade 메소드는 선택한 엘리먼트의 투명도를 점차적으로 변화시킵니다.

jQuery에서 가능한 fade 메소드는 아래와 같습니다.

- $(selector).fadeIn(speed,callback)

- $(selector).fadeOut(speed,callback)

- $(selector).fadeTo(speed,opacity,callback)

speed 에는 “slow", "fast", "normal", 혹은 밀리초의 값을 넣을 수 있습니다.

fadeTo()메소드에서는 opacity변수로 설정한 투명도로 변경이 됩니다. (0~1의 값)

callback 변수는 이 함수가 완료된 후에 실행된 함수의 이름이 들어갑니다.

예 - fadeTo()

$(“button").click(function(){

$("div").fadeTo("slow",0.25);

});

{적용예제보기 6-4}

예 - fadeOut()

$(“button").click(function(){

$("div").fadeOut(4000);

});

{적용예제보기 6-5}

 

 

[jQuery Custom Animations]

애니메이션 효과를 주기 위한 jQuery 메서드의 문법은 다음과 같습니다.

$(selector).animate( {params} , [duration] , [easing] , [callback] )

여기서는 params가 중요한 변수입니다. 이것은 animate될 CSS 속성을 정의합니다. 동시에 여러 가지 속성을 정의할 수 있습니다.

animate( {width:"70%", opacity:0.4, marginLeft:"0.6in", fontSize:"3em"} );

두 번째 변수는 duration입니다. 이것은 애니메이션의 속도를 결정합니다. 여기에 들어갈 수 있는 값은 “fast", "slow", "normal", 또는 밀리초입니다.

예)

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("div").animate({height:300}, "slow");

$("div").animate({width:300}, "slow");

$("div").animate({height:100}, "slow");

$("div").animate({width:100}, "slow");

});

});

</script>

{적용예제보기 6-6}

예)

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("div").animate({left:"100px"}, "slow");

$("div").animate({fontSize:"3em"}, "slow");

});

});

</script>

{적용예제보기 6-7}

 

 

[jQuery Effects]

jQuery로 사용할 수 있는 함수들을 아래와 같이 정래해봤습니다.

$(selector).hide() → 선택한 엘리먼트 감추기

$(selector).show() → 선택한 엘리먼트 보이기

$(selector).toggle() → 선택한 엘리먼트 토글(숨기고 보이고..)

$(selector).slideDown() → 선택한 엘리먼트 slide-down(보이기)

$(selector).slideUp() → 선택한 엘리먼트 slide-up(감추기)

$(selector).slideToggle() → 선택한 엘리먼트 토글(slide-up & slide-down)

$(selector).fadeIn() → 선택한 엘리먼트 점차적으로 보이기(fade in)

$(selector).fadeOut() → 선택한 엘리먼트 점차적으로 숨기기(fade out)

$(selector).fadeTo() → 선택한 엘리먼트를 특정 투명도로 점차적으로 숨기기(fade out)

$(selector).animate() → 선택한 엘리먼트 애니메이션 효과주기

 

 

 

감사합니다.

출처를 밝힙니다.

http://blog.naver.com/topsaga?Redirect=Log&logNo=140155602632