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 相关文章推荐
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
setTimeout学习小结
Feb 08 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
深入koa-bodyparser原理解析
2019/01/16 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
图文详解WinPE下安装Python
2016/05/17 Python
使用python实现生成用户信息
2017/03/20 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python 变量的创建过程详解
2019/09/02 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
中专生自我鉴定书范文
2013/12/28 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
视光学专业自荐信
2014/06/24 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
python实现剪贴板的操作
2021/07/01 Python
Redis Stream类型的使用详解
2021/11/11 Redis
24年收藏2000多部退役军用电台
2022/02/18 无线电