一、顯示/隱藏 ? ? ?使用 toggle() 方法來切換 hide() 和 show() 方法
語法:$(selector).toggle(speed,callback);
-> 可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒
-> 可選的 callback 參數(shù)是 toggle() 方法完成后所執(zhí)行的函數(shù)名稱
例子:
$("button").click(function(){
$("p").toggle();
});
二、jQuery Fading方法實現(xiàn)淡入淡出
1、jQuery fadeIn() ? ? ? ? ? // 淡入已隱藏的元素
2、jQuery fadeOut() ? ? ? // 淡出可見元素
3、jQuery fadeToggle() ?// 淡入和淡出
4、jQuery fadeTo() ? ? ? ? //更改透明度
例子:
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeToggle("slow");
$("#div3").fadeOut(3000);
});
三、jQuery 滑動方法
1、slideDown() 方法用于向下滑動元素
2、slideUp() 方法用于向上滑動元素
3、slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換
例子:
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
四、jQuery 動畫
1、jQuery animate() 方法用于創(chuàng)建自定義動畫
語法:$(selector).animate({params},speed,callback);
-> 必需的 params 參數(shù)定義形成動畫的 CSS 屬性
-> 可選的 speed 參數(shù)規(guī)定效果的時長,可取以下值:"slow"、"fast" 或毫秒
-> 可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱
例子:
/* 可以把屬性的動畫值設(shè)置為預(yù)設(shè)值: "show"、"hide" 或 "toggle" */
$("button").click(function(){
//把<div>元素往右邊移動了 200 像素
$("div").animate({left:'200px'});
});
or ?使用隊列:
$("button").click(function(){
var div=$("div");
div.animate({height:'100px',opacity:'0.2'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
2、jQuery stop() 方法用于停止動畫或效果,在它們完成之前
stop() 方法適用于所有 jQuery 效果函數(shù),包括滑動、淡入淡出和自定義動畫
語法:$(selector).stop(stopAll,goToEnd);
-> 可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊列。默認(rèn)是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向后執(zhí)行。
-> 可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是 false。
五、jQuery Callback ?動畫完成后調(diào)用的方法
$("button").click(function(){
$("div1").hide("slow",function(){
alert("段落現(xiàn)在被隱藏了");
});
});
六、jQuery ?Chaining ?方法鏈接
例子:
$("button").click(function(){
$("#div1").css("color","red").slideUp(500).slideDown(1000);
});