jQuery 效果 - 滑動(dòng)

jQuery提供了一個(gè)簡(jiǎn)單的界面來(lái)執(zhí)行各種驚人的效果。

jQuery效果方法使我們能夠以最少的配置快速應(yīng)用常用的效果。

jQuery滑動(dòng)方法

使用jQuery，我們可以在元素上創(chuàng)建滑動(dòng)效果。

我們有以下jQuery幻燈片方法：

• slideUp()

• slideDown()

• slideToggle()

下面將向您展示如何使用每種滑動(dòng)方法。

jQuery slideUp()和slideDown()

slideUp()方法通過(guò)滑動(dòng)隱藏選定的元素。

slideDown()方法以滑動(dòng)方式顯示選定的元素。

下面的示例演示了slideUp()方法和slideDown()方法的用法：

// 向上滑動(dòng)段落
 $("#btn1").click(function(){
      $("p").slideUp();
});

// 向下滑動(dòng)段落
 $("#btn2").click(function(){
      $("p").slideDown();
});

這是slideUp() 方法的語(yǔ)法：

$(selector).slideUp(duration, easing, callback);

這是slideDown()方法的語(yǔ)法：

$(selector).slideDown(duration, easing, callback);

無(wú)論slideUp()和slideDown()方法接受三個(gè)可選參數(shù)：

• duration -確定滑動(dòng)效果將運(yùn)行多長(zhǎng)時(shí)間?？赡艿闹担骸?slow”，“ fast”或毫秒

• easing -指示要用于過(guò)渡的緩動(dòng)功能?？赡艿闹担骸?swing”，“ linear”

• callback-指定滑動(dòng)方法完成后要調(diào)用的函數(shù)

下面的示例演示了使用slideUp()和slideDown()的duration參數(shù)：

$("#btn1").click(function(){
  $("p").slideUp(1500);
});

$("#btn2").click(function(){
  $("p").slideDown(1500);
});

下面的示例演示了帶有slideUp()和slideDown()的回調(diào)參數(shù)：

$("#btn1").click(function(){
  $("div").slideUp(1500, function(){
    alert("向上滑動(dòng)完成!");
  });
});

$("#btn2").click(function(){
  $("div").slideDown(1500, function(){
    alert("向下滑動(dòng)完成!");
  });
});

動(dòng)畫(huà)化所有跨度（在這種情況下為單詞）以快速滑動(dòng)，在200毫秒內(nèi)完成每個(gè)動(dòng)畫(huà)：

$("button").click(function(){
  $("span:last-child").slideUp("fast", function(){
    $(this).prev().slideUp("fast", arguments.callee);
  });
});

jQuery slideToggle()方法

我們還可以使用slideToggle()方法在上下滑動(dòng)HTML元素之間切換。

如果所選元素最初顯示，它將被隱藏；如果隱藏，它將顯示出來(lái)。

下面的示例在單擊按鈕時(shí)，在所有<p>元素的slideUp和slideDown之間切換：

$("button").click(function(){
  $("p").slideToggle(1500);
});

這是slideToggle()method 的語(yǔ)法：

$(selector).slideToggle(duration, easing, callback);

slideToggle()方法接受三個(gè)可選參數(shù)：

• duration -確定滑動(dòng)效果將運(yùn)行多長(zhǎng)時(shí)間。可能的值：“ slow”，“ fast”或毫秒

• easing -指示要用于過(guò)渡的緩動(dòng)功能?？赡艿闹担骸?swing”，“ linear”

• callback-指定一個(gè)在slideToggle()方法完成后要調(diào)用的函數(shù)

jQuery效果參考

有關(guān)完整的效果參考，請(qǐng)?jiān)L問(wèn)我們的jQuery 效果參考手冊(cè)。