http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 5555|回复: 4

[Jquery] jQuery页面滑动效果大总结

[复制链接]
发表于 2018-4-3 21:39:08 | 显示全部楼层 |阅读模式
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, 实现的是以滑动的效果,实现元素的显示或者隐藏,即,如果元素显示,则滑动隐藏,如果元素隐藏,则滑动显示


1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
 楼主| 发表于 2018-4-3 21:44:21 | 显示全部楼层
从上面可以看出,slide是滑动的代表,down,向下
up 向上
toggle,则为交互的意思
 楼主| 发表于 2018-4-3 21:45:03 | 显示全部楼层
通过这样可以轻松的记住哈
发表于 2018-4-3 21:47:48 | 显示全部楼层
我只是路过打酱油的。
 楼主| 发表于 2018-4-3 22:23:08 | 显示全部楼层
谢老大支持,努力ing
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-23 00:39

© 2014-2021

快速回复 返回顶部 返回列表