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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
js字符编码函数区别分析
Jun 05 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
js异常捕获方法介绍
Apr 10 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 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分页函数
2006/07/08 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
深入理解Vuex 模块化(module)
2017/09/26 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
Python中的zipfile模块使用详解
2015/06/25 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
python实现图像拼接功能
2020/03/23 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
城管个人总结
2015/02/28 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
保姆聘用合同
2015/09/21 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python