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, 实现的是以滑动的效果,实现元素的显示或者隐藏,即,如果元素显示,则滑动隐藏,如果元素隐藏,则滑动显示
|