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中,为什么要尽可能使用局部变量?
Apr 06 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
对vue中methods互相调用的方法详解
Aug 30 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
laravel 数据验证规则详解
2019/10/23 PHP
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python数据类型学习笔记
2016/01/13 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
师德建设实施方案
2014/03/21 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
暑假生活随笔
2015/08/15 职场文书