jQuery 效果 - 滑动

jQuery提供了一个简单的界面来执行各种惊人的效果。

jQuery效果方法使我们能够以最少的配置快速应用常用的效果。

jQuery滑动方法

使用jQuery,我们可以在元素上创建滑动效果。

我们有以下jQuery幻灯片方法:

下面将向您展示如何使用每种滑动方法。

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()方法接受三个可选参数:

  • duration -确定滑动效果将运行多长时间。可能的值:“ slow”,“ fast”或毫秒

  • easing -指示要用于过渡的缓动功能。可能的值:“ swing”,“ linear”

  • callback-指定滑动方法完成后要调用的函数

下面的示例演示了使用slideUp()和slideDown()的duration参数:

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

$("#btn2").click(function(){
  $("p").slideDown(1500);
});
测试看看‹/›

下面的示例演示了带有slideUp()和slideDown()的回调参数:

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

$("#btn2").click(function(){
  $("div").slideDown(1500, function(){
    alert("向下滑动完成!");
  });
});
测试看看‹/›

动画化所有跨度(在这种情况下为单词)以快速滑动,在200毫秒内完成每个动画:

$("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()方法接受三个可选参数:

  • duration -确定滑动效果将运行多长时间。可能的值:“ slow”,“ fast”或毫秒

  • easing -指示要用于过渡的缓动功能。可能的值:“ swing”,“ linear”

  • callback-指定一个在slideToggle()方法完成后要调用的函数

jQuery效果参考

有关完整的效果参考,请访问我们的jQuery 效果参考手册