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 相关文章推荐
jQuery Ajax请求状态管理器打包
May 03 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
AngularJs表单验证实例详解
May 30 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 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中一个完整表单处理实现代码
2011/11/10 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
Python Sleep休眠函数使用简单实例
2015/02/02 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
django 类视图的使用方法详解
2019/07/24 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
大学新生军训感言
2014/02/25 职场文书
工程承诺书怎么写
2014/05/24 职场文书
土地租赁意向书
2014/07/30 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
表彰大会新闻稿
2015/07/17 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
使用MybatisPlus打印sql语句
2022/04/22 SQL Server
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server