[jQuery] Getting Started with jQuery 03

출처: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Using Effects

$(document).ready(function(){    $("a").toggle(function(){      $(".stuff").hide('slow');    },function(){      $(".stuff").show('fast');    });  });

소스 버전이 옛날 것인가... 제대로 동작하질 않는군..

http://docs.jquery.com/Effects/toggle
위의 링크된 문서를 참고할 것

$(document).ready(function() {     $("#btn1").click(function() {         $("p").toggle();         $("#hbtn").toggle();     }); }); ----------------------------------------- <button id="btn1">Toggle</button> <p class="tg">Hello</p> <p class="tg" style="display: none;">Toggle!</p> <p>AAA</p> <p style="display: none;">BBB</p> <button id="hbtn" style="display: none;">hidden button</button>

해보면 toggle()한 display:none이 아닌 것은 안보이게 되고, display:none이었던 것은 보이게된다.

var flip = 0; $("button").click(function () {     $("p").toggle( flip++ % 2 == 0 ); });

toggle(XXX)안에 식을 넣는 것도 가능. true면 보이고, false면 숨긴다.

$("button").click(function () {     $("p").toggle("slow"); });

toggle("slow"). 천천히 사라지고 천천히 나타남.
slow, fast, normal 이 있고, 직접 밀리세컨드로 속도를 지정할 수 있다.

$("button").click(function () {     $("p").toggle("slow", doCallback); }); function doCallback() {     // do something     this; // DOM element }

이런 식으로 토글 이펙트가 끝났을 때 실행될 callback 함수도 지정 가능.
여러 개가 토글 되는 경우 각각 실행됨.
사라지는 토글이라고 해서 사라지는 DOM의 callback만 실행되는 것이 아니라, 나타나는 DOM의 callback도 실행된다.
즉 어찌됐든 토글되는 모든 DOM의 callback이 실행됨.

기타 Effects는 아래 링크를 참조.
http://docs.jquery.com/Effects

Animate

// Using multiple unit types within one animation. $("#go").click(function(){     $("#block").animate({         width: "70%",         opacity: 0.4,         marginLeft: "0.6in",         fontSize: "3em",         borderWidth: "10px"     }, 1500 ); }); --------------------------------------------------- <button id="go">» Run</button> <div id="block">Hello!</div>

#block이 초기 모양에서 animate({XXX}, YYY)에 설정된 모양(XXX)으로 변형된다. 이 때, YYY는 변형 시간(클 수록 천천히).

$("#go1").click(function(){     $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )          .animate( { fontSize:"24px" }, 1500 )          .animate( { borderRightWidth:"15px" }, 1500     ); }); $("#go2").click(function(){     $("#block2").animate( { width:"90%"}, 1000 )          .animate( { fontSize:"24px" } , 1000 )          .animate( { borderLeftWidth:"15px" }, 1000     ); }); $("#go3").click(function(){     $("#go1").add("#go2").click(); }); $("#go4").click(function(){     $("div").css({width:"", fontSize:"", borderWidth:""}); }); --------------------------------------------------- <button id="go1">» Animate Block1</button> <button id="go2">» Animate Block2</button> <button id="go3">» Animate Both</button> <button id="go4">» Reset</button> <div id="block1">Block1</div> <div id="block2">Block2</div>

$("#ID").animate({AAA},AAA).animate({BBB},BBB).animate({CCC},CCC); AAA, BBB, CCC의 순서대로 애니메이트됨.
queue:false 옵션이 있으면 순서 상관없이 동시에 애니메이트됨.

$("#go1").add("#go2").click(); go1과 go2를 동시에 클릭 이벤트 발생시킴.


animate()
Arguments:

params	Options
A set of style attributes that you wish to animate, and to what end.
duration (Optional)	String, Number
A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
easing (Optional)	String
The name of the easing effect that you want to use (plugin required). There are two built-in values, "linear" and "swing".
callback (Optional)	Function
A function to be executed whenever the animation completes, executes once for each element animated against.

$("p").animate({       "height": "toggle", "opacity": "toggle" }, { duration: "slow" });

Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
라는데, height랑 opacity를 토글하는게 무슨 효과인지 모르겠다.

나머진 위의 링크 참조...