King的幸福國度

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

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

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

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

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

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

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

 
$("#myimg").show('fast');
$("#myimg").hide(2000);

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

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

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

 
$("#myimg").fadeOut('fast');

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

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

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

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

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

 
$("#myimg").slideDown(1000);
$("#myimg").slideToggle('slow');

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

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

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

 
$('#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

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

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

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

介紹一個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

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

 
$('.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的中心點像是沒有變一樣(也就是向四方擴散)