$("#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的中心點像是沒有變一樣(也就是向四方擴散)
留言列表
