jQuery in Action Ch.5 筆記

2009-06-16

ch.5 Sprucing up with animations and effects

5.1 Showing and hiding elements

要簡單地顯示或隱藏elements 是使用show()以及hide()這兩個方法

$("#myimg").hide();
$("#myimg").show();

這裡還有提到一點就是
如果頁面上某個element要預設成隱藏
書裡推薦的是在頁面load完後再使用hide()將他隱藏
會比直接在style裡加display:none;好

5.1.1 Implementing a collapsible list

這個小節利用一個巢狀列表 以顯示或是隱藏裡面的資訊來練習show()及hide()

5.1.2 Toggling the display state of elements

還有一個可以切換顯示或是隱藏elements的方法 toggle()

$("#myimg").toggle();

當elements是隱藏的時候 使用toggle()會將他顯示 相反也是一樣

5.2 Animating the display state of elements

這節是要介紹比較不突兀的顯示或隱藏elements的方法
利用一些effect來讓這個動作比較平滑

5.2.1 Showing and hiding elements gradually
hide(speed,callback)
$("#myimg").show('fast');
$("#myimg").hide(2000);

第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast)
如果省略的話 則是會像上節講的一樣直接隱藏
第二個參數callback是擺一個function 當這個動作完成時會執行

show(speed,callback)
toggle(speed,callback)

同樣的 show()跟toggle()的用法也是一樣
第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast)
第二個參數callback是擺一個function 當這個動作完成時會執行

5.2.2 Fading elements into and out of existence

另一種顯示或隱藏的方法是改變elements的透明度直到完全透明或是完全顯示
fadeIn()fadeOut()

fadeOut(speed,callback)
fadeIn(speed,callback)
$("#myimg").fadeOut('fast');

(與show()、hide()、toggle()的參數用法一樣)
第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
第二個參數callback是擺一個function 當這個動作完成時會執行

另一個方法fadeTo()則是可以調整elements的透明度

fadeTo(speed,opacity,callback)
$("#myimg").fadeTo('fast',0.5);

第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
第二個參數opacity是透明度 他的範圍可以填入0.0 ~ 1.0
第三個參數callback是擺一個function 當這個動作完成時會執行

5.2.3 Sliding elements up and down

還有另一種顯示或隱藏的方法是將elements慢慢向上收回或是慢慢向下展開
slideDown()slideUp()及切換的slideToggle()

slideDown(speed,callback)
slideUp(speed,callback)
slideToggle(speed,callback)
$("#myimg").slideDown(1000);
$("#myimg").slideToggle('slow');

(與show()、hide()、toggle()的參數用法一樣)
第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
第二個參數callback是擺一個function 當這個動作完成時會執行

5.2.4 Stopping animations
stop()

當要停止某個elements的動作時 要使用stop()

5.3 Creating custom animations

jQuery提供了一個方法animate() 可以讓我們自己設計想要elements作的動作

animate(properties,duration,easing,callback)
animate(properties,options)
$('#animateMe').animate(
	{opacity:0,top:0}
  ,'slow'
  ,function(){ $(this).hide(); }
);

properties是填入一個object 而這個object要包含所有最後要達到css stlye
(例如elements的寬度要達到600px 之類的)
duration可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
easing是漸變的方式 有兩種內建的方式linear(線性)、swing(搖擺)
callback是擺一個function 當這個動作完成時會執行
options是填入一個object 而這個object則是可以填入上面講過的duration、easing跟complete(也就是上面說的callback)
還有另一個可以填入的是queue 如果設定為false 則這個動作會立即被執行(也就是如果後面也跟著另一個animate() 這個動作會同時執行)
[update]
如果要設定顏色的漸變 還要再裝plugin

5.3.1 A custom scale animation

先介紹一個改變尺寸的例子

$('.animateMe').each(function(){
	$(this).animate(
		{
			width: $(this).width() * 2,
			height: $(this).height() * 2
		},
		2000
	);
});

將class=animateMe的elements在2秒(2000毫秒)的時間內將長寬都各別變大為兩倍

5.3.2 A custom drop animation

介紹一個drop的例子

$('.animateMe').each(function(){
	$(this)
		.css('position','relative')
		.animate(
			{
				opacity: 0,
				top: $(window).height() - $(this).height() - $(this).position().top
			},
			'slow',
			function(){ $(this).hide(); });
});

要先將elements的position設定為relative(因為這樣才能動)
改變class=animateMe的elements的透明度及高度
最後會被移到畫面的底部 並且透明度會變0(也就是完全透明)
然後再將elements隱藏起來

有一點可以提的是
如果將opacity:0改成opacity:”hide”
這個動作最後完成時會直接將elements隱藏
同時也不需要最後的callback的function

5.3.3 A custom puff animation

一個擴散並消失的例子
將前兩小節的功能結合在一起

$('.animateMe').each(function(){
	var position = $(this).position();
	$(this)
		.css({position:'absolute',top:position.top,
					left:position.left})
		.animate(
			{
        opacity: 'hide',
        width: $(this).width() * 5,
        height: $(this).height() * 5,
        top: position.top - ($(this).height() * 5 / 2),
        left: position.left - ($(this).width() * 5 / 2)
      },
      'normal');
});

因為在擴散的過程中 elements的位置會向右下方長大
所以同時也要改變位置 讓看起來的位置像沒有變一樣(真繞舌)
首先要改變position為absolute 並給定目前的top跟left
然後最終要到達的狀態是
opacity就跟前一小節講的一樣 hide的意思就是最後會隱藏起來
寬度跟高度則是變為原來的五倍
top跟left則是要計算成會讓elements的中心點像是沒有變一樣(也就是向四方擴散)