jquery实现滑动特效代码


Posted in Javascript onAugust 10, 2015

在项目中,有需求要使用jquery实现滑动效果,于是把相关内容整理如下,下文介绍了很详细,有文字说明和代码分析,需要的朋友可以来学习下。

实现方式一:

 .slideUp([duration][,complete])——目标元素向上滑入隐藏;
.slideDown([duration][,complete])——目标元素向下滑出显示;
.slideToggle([duration][,complete])——目标元素隐藏则向下滑出显示,否则向上滑入隐藏;

注:duration为方法执行的时间区间,complete为回调函数。

<!DOCTYPE html> 
<html lang="zh_CN"> 
<head> 
 <meta charset="UTF-8"> 
 <title>滑动效果</title> 
 <script src="js/jquery-2.1.3.min.js"></script> 
 <script src="js/slide.js"></script> 
 <style> 
  img{ 
   width:500px; 
  } 
 </style> 
</head> 
<body> 
<div> 
 <div> 
  <button id="btn1">向上划入隐藏</button> 
  <button id="btn2">向下滑出显示</button> 
  <button id="btn3">向上划入隐藏/向下滑出显示</button> 
 </div> 
 <img src="images/2.jpg"/> 
</div> 
</body> 
</html>

slide.js代码:

/*滑动效果*/ 
$(document).ready(function(){ 
 //向上滑入 
 $('#btn1').click(function(){ 
  $('img').slideUp(2000); 
 }); 
 //向下滑出 
 $('#btn2').click(function(){ 
  $('img').slideDown(2000); 
 }); 
 //切换滑动 
 $('#btn3').click(function(){ 
  $('img').slideToggle(2000); 
 }); 
})

jquery实现滑动特效代码

实现方式二:

一、jQuery___效果(滑动效果)

slideDown(speed, [callback])

概述
通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。

 参数

speedString,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (可选)FunctionFunction

在动画完成时执行的函数

示例

描述:

用600毫秒缓慢的将段落滑下

jQuery 代码:

$("p").slideDown("slow");

描述:

用200毫秒快速将段落滑下,之后弹出一个对话框

jQuery 代码:

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

slideUp(speed, [callback])

概述

通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。

参数

speedString,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

callback (可选)Function

在动画完成时执行的函数

示例

描述:

用600毫秒缓慢的将段落滑上

jQuery 代码:

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

描述:

用200毫秒快速将段落滑上,之后弹出一个对话框

jQuery 代码:

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

slideToggle(speed, [callback])

概述

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。

参数

speedString,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

callback (可选)Function
在动画完成时执行的函数

示例

描述:

用600毫秒缓慢的将段落滑上或滑下

jQuery 代码:

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

描述:

用200毫秒快速将段落滑上或滑下,之后弹出一个对话框

jQuery 代码:

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

以上内容是jquery实现滑动特效代码,希望大家喜欢。

Javascript 相关文章推荐
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
实现高性能javascript的注意事项
May 27 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 #Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 #Javascript
javascript与Python快速排序实例对比
Aug 10 #Javascript
javascript密码强度校验代码(两种方法)
Aug 10 #Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 #Javascript
jQuery解决input超多的表单提交
Aug 10 #Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 #Javascript
You might like
php设置编码格式的方法
2013/03/05 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
javascript 函数式编程
2007/08/16 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
Python for循环生成列表的实例
2018/06/15 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
对python的输出和输出格式详解
2018/12/08 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
党员公开承诺事项
2014/03/25 职场文书
村干部培训方案
2014/05/02 职场文书
师德师风剖析材料
2014/09/30 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
教师党员个人整改措施
2014/10/27 职场文书
学习普通话的体会
2014/11/07 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
幼儿园感谢信
2015/01/21 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫