jQuery 效果 - 滑動

jQuery提供了一個簡單的界面來執(zhí)行各種驚人的效果。

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

jQuery滑動方法

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

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

• slideUp()

• slideDown()

• slideToggle()

下面將向您展示如何使用每種滑動方法。

jQuery slideUp()和slideDown()

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

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

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

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

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

這是slideUp() 方法的語法：

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

這是slideDown()方法的語法：

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

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

• duration -確定滑動效果將運行多長時間?？赡艿闹担骸?slow”，“ fast”或毫秒

• easing -指示要用于過渡的緩動功能。可能的值：“ swing”，“ linear”

• callback-指定滑動方法完成后要調(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("向上滑動完成!");
  });
});

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

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

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

jQuery slideToggle()方法

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

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

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

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

這是slideToggle()method 的語法：

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

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

• duration -確定滑動效果將運行多長時間?？赡艿闹担骸?slow”，“ fast”或毫秒

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

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

jQuery效果參考

有關(guān)完整的效果參考，請訪問我們的jQuery 效果參考手冊。