jQuery页面滑动效果大总结

范范

jQuery页面滑动效果大总结

jQuery有很多页面元素展示效果，本次主要讲解页面的滑动效果，主要是让隐藏的元素，一个滑动的效果显示出来，实现一个滑动显示的效果。

jQuery页面滑动效果显示方式主要有如下几种

---

[C#] 纯文本查看 复制代码

1. slideDown(,[e],[fn])  通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
2. slideUp([s,[e],[fn]])  通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
3. slideToggle(,[e],[fn])  通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

1. slideDown(,[e],[fn])  

---

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
注： 这个动画效果 只调整元素的高度，可以使匹配的元素 以“滑动”的方式显示出来。

参数使用如下

[C#] 纯文本查看 复制代码

1. speed[,fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。

2. [speed],[easing],[fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn在动画完成时执行的函数，每个元素执行一次。

实例1
点击样式为‘btn2’的元素时，以滑动方式显示隐藏的 <p> 元素
jQuery代码

[JavaScript] 纯文本查看 复制代码

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

实例2
用200毫秒快速将段落滑下，之后弹出一个对话框
jQuery代码

[JavaScript] 纯文本查看 复制代码

$("p").slideDown("fast",function(){
   alert("Animation Done.");
 });

2. slideUp([s,[e],[fn]])  

---

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
此方法与 slideDown 方式是一样的，只是滑动的方向是相反的，从下往上滑动显示出来

参数使用方法与 slideDown 一样，在这里就不再重复讲解，查看实例，以便于了解方法使用方式

实例1
用600毫秒缓慢的将段落滑上
jQuery代码

[JavaScript] 纯文本查看 复制代码

$("p").slideUp("slow")

实例2
用200毫秒快速将段落滑上，之后弹出一个对话框
jQuery代码

[JavaScript] 纯文本查看 复制代码

$("p").slideUp("fast",function(){
   alert("Animation Done.");
 });

3. slideToggle(,[e],[fn])  

---

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

参数使用方法与以上两个方法一样，就不再讲解了哈，看上面 slideDown 的讲解

实例1
用600毫秒缓慢的将段落滑上或滑下
jQuery代码

[JavaScript] 纯文本查看 复制代码

$("p").slideToggle("slow")

备注

---

从以上3方法的详解中可以看出
slideDown ，实现元素从上往下的滑动效果显示
slideUp， 实现元素从下往上的滑动效果显示
而 slideToggle， 实现的是以滑动的效果，实现元素的显示或者隐藏，即，如果元素显示，则滑动隐藏，如果元素隐藏，则滑动显示

范范

从上面可以看出，slide是滑动的代表，down，向下
up 向上
toggle，则为交互的意思

范范

通过这样可以轻松的记住哈

站长苏飞

我只是路过打酱油的。

范范

谢老大支持，努力ing