출처:
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를 토글하는게 무슨 효과인지 모르겠다.
나머진 위의 링크 참조...
