jQuery支持使用下面方法来实现HTML元素的滑动效果:
- slideDown()
- slideUp()
- slideToggle()
slideDown方法
用来实现向下滑动动画效果,其基本语法为:
$(selector).slideDown(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在slideDown()方法结束后调用。
下面例子点击按钮#panel 将采用下滑方式显示出来:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#flip").click(function () {
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel, #flip
{
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel
{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
slideUp方法
用来实现向上滑动动画效果,其基本语法为:
$(selector).slideUp(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在slideUp()方法结束后调用。
$("#flip").click(function(){
$("#panel").slideUp();
});
slideToggle方法
用来实现交替显示向上向下滑动动画效果,如果之前是下滑显示,slideToggle则显示slideUp(),反之显示slideDown
其基本语法为:
$(selector).slideToggle(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在slideUp()方法结束后调用。
$("#flip").click(function(){
$("#panel").slideToggle();
});
分享到:
相关推荐
jQuery经典入门教程,供学习交流,谢谢~
jQuery入门,jQuery入门,jQuery入门,jQuery入门
jquery入门教程.jquery入门教程
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...
JQuery基础教程之第五章后面章节请看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery...
JQuery基础教程之第八章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
JQuery基础教程之第七章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
jQuery中文入门教程:基础的jQuery中文入门教程,很好的资源
JQuery基础教程之第四章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇
JQuery基础教程之第六章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
juery 入门经典教程,详细、系统的介绍了jQuery的配置 基本操作及使用
jquery入门jquery入门jquery入门jquery入门
2款具有滑动效果的导航代码,鼠标移动可触发导航hover状态的滑动效果,兼容IE6和主流浏览器,懒人图库推荐下载! 使用方法: 1、<!--[if lt IE 7 ]><html class="no-js ie6" lang="en"><![endif]--> <!--[if IE...
jQuery 入门教程,里面附上代码,包收益匪浅,不用去买书看,就这么简单!
jQuery入门教程.zip
jQuery中文入门教程.chm 很好的入门教程
Jquery入门好的教程Jquery入门好的教程Jquery入门好的教程Jquery入门好的教程Jquery入门好的教程
jquery入门教程,有利于初学者学习jquery!!里面讲解详细,有具体的例子共初学者参考!!jquery入门教程 jquery入门教程 jquery入门教程 jquery入门教程 jquery入门教程