jQuery顯示與隱藏
-
show([speed,[easing],[fn]])
- 顯示隱藏的匹配元素
- 內(nèi)部的實(shí)現(xiàn)原理是根據(jù)當(dāng)前操作的元素是塊級還是行內(nèi)決定的
- 塊級內(nèi)部調(diào)用
display:block;,行內(nèi)內(nèi)部調(diào)用display:inline - 參數(shù)
-
speed字串符速度slow,normal,fast或表示動畫時長的毫秒數(shù)值 -
easing用來指定切換效果眷唉，默認(rèn)是swing予颤，可用參數(shù)linear -
fn在動畫完成時執(zhí)行的回調(diào)函數(shù)，每個元素執(zhí)行一次
-
<script>
$("button").eq(0).click(function () {
$("div").show(1000, function () {
alert("animation over");
});
});
</script>
-
hide([speed,[easing],[fn]])
- 隱藏顯示的元素
- 參數(shù)
-
speed字串符速度slow,normal,fast或表示動畫時長的毫秒數(shù)值 -
easing用來指定切換效果冬阳，默認(rèn)是swing蛤虐，可用參數(shù)linear -
fn在動畫完成時執(zhí)行的回調(diào)函數(shù)，每個元素執(zhí)行一次
-
<script>
$("button").eq(0).click(function () {
$("div").hide(1000, function () {
alert("show over");
});
});
</script>
-
toggle([speed],[easing],[fn])
- 如果元素是可見的肝陪，切換為隱藏的驳庭；如果元素是隱藏的，切換為可見的
- 參數(shù)
-
speed字串符速度slow,normal,fast或表示動畫時長的毫秒數(shù)值 -
easing用來指定切換效果氯窍，默認(rèn)是swing饲常，可用參數(shù)linear -
fn在動畫完成時執(zhí)行的回調(diào)函數(shù)，每個元素執(zhí)行一次
-
<script>
$("button").eq(2).click(function () {
$("div").toggle(1000, function () {
alert("Switch over");
});
});
</script>
jQuery滑動效果
-
slideDown([speed],[easing],[fn])
- 通過高度變化（向下增大）來動態(tài)地顯示所有匹配的元素
- 參數(shù)與顯示隱藏函數(shù)參數(shù)一樣
<script>
$("button").eq(0).click(function () {
$("div").slideDown(1000, function () {
alert("SlideDown");
});
});
</script>
-
slideUp([speed,[easing],[fn]])
- 通過高度變化（向下增大）來動態(tài)地隱藏所有匹配的元素
- 參數(shù)與顯示隱藏函數(shù)參數(shù)一樣
<script>
$("button").eq(1).click(function () {
$("div").slideUp(1000, function () {
alert("SlideUp");
});
});
</script>
-
slideToggle([speed],[easing],[fn])
- 通過高度變化來切換所有匹配元素的可見性
- 參數(shù)與顯示隱藏函數(shù)參數(shù)一樣
<script>
$("button").eq(2).click(function () {
$("div").slideToggle(1000, function () {
alert("SlideToggle");
});
});
</script>
jQuery淡入淡出
參數(shù)狼讨、注意事項(xiàng)和顯示隱藏動畫一模一樣, 只不過動畫效果不一樣而已
-
fadeIn([speed],[easing],[fn])
- 淡入動畫
<script>
$("button").eq(0).click(function () {
$("div").fadeIn(1000, function () {
alert("Over");
});
});
</script>
-
fadeOut([speed],[easing],[fn])
- 淡出動畫
<script>
$("button").eq(1).click(function () {
$("div").fadeOut(1000, function () {
alert("Over");
});
});
</script>
-
fadeToggle([speed,[easing],[fn]])
- 切換動畫(顯示變淡出,不顯示變淡入)
<script>
$("button").eq(2).click(function () {
$("div").fadeToggle(1000, function () {
alert("Over");
});
});
</script>
-
fadeTo([[speed],opacity,[easing],[fn]])
- 淡入到指定透明度動畫
- 通過第二個參數(shù),淡入到指定的透明度(取值范圍0~1)
<script>
$("button").eq(3).click(function () {
$("div").fadeTo(1000, 0.2, function () {
alert("Over");
})
});
</script>
jQuery自定義動畫
-
animate(params,[speed],[easing],[fn])
- 用于創(chuàng)建自定義動畫的函數(shù)
- 參數(shù)
- 第一個參數(shù): 接收一個對象, 可以在對象中修改屬性
- 第二個參數(shù): 指定動畫時長
- 第三個參數(shù): 指定動畫節(jié)奏, 默認(rèn)就是
swing - 第四個參數(shù): 動畫執(zhí)行完畢之后的回調(diào)函數(shù)
<script>
// 修改屬性
$("button").eq(0).click(function (){
$(".box1").animate({
width: 500
}, 2000, "linear", function () {
alert("Over");
});
});
// 同時修改多個屬性
// 多個屬性動畫會同時執(zhí)行
$("button").eq(1).click(function (){
$(".box2").animate({
width: 200,
marginLeft:200
}, 2000, "linear", function () {
alert("Over");
});
});
// 每次開始運(yùn)動都必須是初始位置或者初始狀態(tài)
// 如果想在上一次位置或者狀態(tài)下再次進(jìn)行動畫可以使用累加動畫
$("button").eq(2).click(function (){
$(".box3").animate({
width: "+=100"
}, 2000, "linear", function () {
alert("Over");
});
});
// 初次之外贝淤，還可以使用顯示隱藏等函數(shù)的關(guān)鍵字
$("button").eq(3).click(function (){
$(".box4").animate({
width: "hide"
// width: "toggle"
}, 2000, "linear", function () {
alert("Over");
});
});
</script>
-
delay(duration,[queueName])
- 設(shè)置一個延時來推遲執(zhí)行隊(duì)列中之后的項(xiàng)目
<script>
// 表示width執(zhí)行完后過2s在執(zhí)行高度動畫
$(".box").animate({
width: 500
}, 1000).delay(2000).animate({
height: 500
}, 1000);
</script>
-
stop([clearQueue],[jumpToEnd])
- 停止所有在指定元素上正在運(yùn)行的動畫
<script>
$("button").eq(1).click(function () {
// 立即停止當(dāng)前動畫, 繼續(xù)執(zhí)行后續(xù)的動畫
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);
// 立即停止當(dāng)前和后續(xù)所有的動畫
// $("div").stop(true);
// $("div").stop(true, false);
// 立即完成當(dāng)前的, 繼續(xù)執(zhí)行后續(xù)動畫
// $("div").stop(false, true);
// 立即完成當(dāng)前的, 并且停止后續(xù)所有的
$("div").stop(true, true);
});
</script>
-
finish( [queue ] )
- 停止當(dāng)前正在運(yùn)行的動畫，刪除所有排隊(duì)的動畫政供，并完成匹配元素所有的動畫
- 當(dāng)
.finish()在一個元素上被調(diào)用霹娄，立即停止當(dāng)前正在運(yùn)行的動畫和所有排隊(duì)的動畫（如果有的話），并且他們的CSS屬性設(shè)置為它們的目標(biāo)值（所有動畫的目標(biāo)值）鲫骗。所有排隊(duì)的動畫將被刪除
<script>
$("button").eq(0).click(function () {
$(".one").animate({
height: 500
}, 2000);
$(".one").animate({
width: 500
}, 1000);
});
// 停止所有動畫,并將CSS設(shè)置為其最終值
$("button").eq(1).click(function () {
$(".one").finish();
});
</script>
jQuery動畫設(shè)置
<script>
// 關(guān)閉頁面上所有的動畫
jQuery.fx.off = true;
// 設(shè)置動畫的顯示幀速(ms)
jQuery.fx.interval = 100;
</script>
