Jquery—效果(隱藏、顯示、切換,滑動,淡入淡出及動畫)
阿新 • • 發佈:2019-01-30
1.隱藏和顯示
語法:
$(selector).hide(speed,callback); 隱藏
$(selector).show(speed,callback);顯示
$(selector).toggle(speed,callback);隱藏顯示進行切換
其中,
speed是隱藏顯示的速度,可取:"slow"、"fast" 或毫秒。
callback是隱藏顯示動作完成之後執行的函式。
使用:
$("button").click(function(){
$("p").hide(1000);
});
2.淡入淡出
四種 fade 方法:
-
fadeIn():$(selector).fadeIn(
- fadeOut():$(selector).fadeOut(speed,callback); 淡出可見元素
- fadeToggle():$(selector).fadeToggle(speed,callback); 在 fadeIn() 與 fadeOut() 方法之間進行切換
-
fadeTo():$(selector).fadeTo(speed,opacity,callback); 漸變為給定的不透明度(值介於 0 與 1 之間)
-
其中,
speed: 效果的時長,可選(fadeto中必須有這個引數),可取以下值:"slow"、"fast" 或毫秒。.
callback : fading 完成後所執行的函式名稱,可選。
-
用法:
-
$(function(){ $("#btn").click(function(){ $("#box4").fadeToggle(1000); }); });
3.滑動
滑動方法:
- slideDown():$(selector).slideDown(speed,callback); 向下滑動已隱藏元素
- slideUp():$(selector).slideUp(speed,callback); 向上滑動已顯示元素
-
slideToggle():$(
$(function(){
$("#btn").click(function(){
$("#box4").slideToggle();
});
});
4.動畫
animate():$(selector).animate({params},speed,callback);
{params}:必選,動畫的 CSS 屬性;
speed:可選,動畫執行的速度;
callback:可選,動畫百分之百執行完成之後指定的函式。
用法:
$(function(){
$("#btn").click(function(){
$("#box4").animate({
marginLeft:"100px"
});
});
});
此外,{params}中還可以操作多個值去改變多個css屬性。
$("#box4").animate({
marginLeft:"100px",
height:"200px",
width:"200px"
});
使用相對值,讓每執行一次動畫,在原來的基礎上相對增量。
$("#box4").animate({
marginLeft:"+=10px",
height:"+=10px",
width:"+=10px"
});
使用預定值,將css動畫屬性設定為show,hide或者toggle.
$("#box4").animate({
height:"toggle",
});
還可以使用佇列功能,如下:
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
每次點選按鈕,動畫將從上往下逐個執行。
5.停止動畫
stop():$(selector).stop(stopAll,goToEnd);適用於所有 jQuery 效果函式,包括滑動、淡入淡出和自定義動畫。
stopAll :可選,是否應該清除動畫佇列。預設是 false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行。
goToEnd :可選,是否立即完成當前動畫。預設是 false。
預設地,stop() 會清除在被選元素上指定的當前動畫。
用法:
$("#stop").click(function(){
$("#box4").stop();
});
本文參考資料來自:http://www.runoob.com/jquery/jquery-chaining.html