【jQuery】使用JQ来编写面板的淡入淡出效果
本文与上一篇的《【jQuery】使用JQ来编写最主要的淡入淡出效果》（点击打开链接）为姊妹篇。
但上一篇仅仅是对文本的基本控制，本篇则是对面板元素进行控制。
尽管功能上很类似，可是所用到的控制函数是不同的，因此有必要进行说明。
实现了点击一个面板来控制还有一个面板。而且对显示与隐藏速度进行了控制。
一、基本目标
网页中有两个面板一个button，点击上面板，则可以使以下在显示/隐藏之间来回切换。点击下方的三个button。可以分别实现以下板的缓慢隐藏、缓慢显示、迅速在隐藏/显示中切换的功能，如图：
二、制作过程
1.首先你要到JQ官网中下载一个JQ支持文件放入你的网站目录。这个支持文件是jQuery1.11（点击打开链接）。能够到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11（点击打开链接）。而不是不兼容旧浏览器IE6的jQuery2。
2.网页的基本布局
3.网页的代码。以下一部分一部分地进行说明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ面板的淡出与显示</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script>
$(document).ready(function() {
$("#divhead").click(function() {
$("#div").slideToggle("slow");
});
$("#b1").click(function() {
$("#div").slideUp(3000);
});
$("#b2").click(function() {
$("#div").slideDown(3000);
});
$("#b3").click(function() {
$("#div").slideToggle(300);
});
});
</script> <style type="text/css">
#div,#divhead {
padding: 5px;
text-align: center;
background-color: #0000ff;
border: solid 1px #c3c3c3;
color: #fff;
} #div {
padding: 50px;
display: none;
}
</style> </head>
<body> <div id="divhead">
<u>点我打开/关闭</u>
</div>
<div id="div">
被折腾的文本
</div>
<p align="center">
<button id="b1">
慢慢隐藏
</button>
<button id="b2">
慢慢打开
</button>
<button id="b3">
迅速隐藏/打开
</button>
</p> </body> </html>
（1）<head>中的<style type="text/css">部分
首先写这部分是对两个面板的基本样式进行好布局。
#div,#divhead {
/*这个是面板元素离上下左右的像素的多少*/
padding: 5px;
/*面板内的文本进行居中对齐*/
text-align: center;
/*面板背景颜色*/
background-color: #0000ff;
/*面板的边框颜色*/
border: solid 1px #c3c3c3;
/*面板内字体的颜色为白色，写作#ffffff也能够*/
color: #fff;
}
#div {
/*这个面板首先是继承上面#div,#divhead的属性，css的继承是这个样子的，父类非常长，子类反而短，不像java*/
/*再对当中的padding属性进行改写，再多加一个默认不展示的属性*/
padding: 50px;
display: none;
}
（2）再编写<body>部分
<!--定义一个名为divhead的面板-->
<div id="divhead">
<!--<u>标签是加入下划线-->
<u>点我打开/关闭</u>
</div>
<!--定义一个名为div的面板-->
<div id="div">
被折腾的文本
</div>
<!--这几个按钮居中显示-->
<p align="center">
<button id="b1">
慢慢隐藏
</button>
<button id="b2">
慢慢打开
</button>
<button id="b3">
迅速隐藏/打开
</button>
</p>
（3）<head>中的核心代码部分。
与《【jQuery】使用JQ来编写最主要的淡入淡出效果》（点击打开链接）中控制文本作对照。
所使用的方法，从hide(),show(),toggle()变为了slideUp(),slideDown(),slideToggle()
<!--网页编码。标题，须要是用jQuery-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ面板的淡出与显示</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script> $(document).ready(function() {
<!--点击divhead面板将会触发的行为-->
$("#divhead").click(function() {
<!--div面板将会在隐藏与显示中切换，且速度为较缓慢-->
$("#div").slideToggle("slow");
});
<!--点击b1button，面板将会隐藏，且3000毫秒，也就是3秒内，完毕这个动作-->
$("#b1").click(function() {
$("#div").slideUp(3000);
});
<!--点击b2button，面板将会显示。且3000毫秒，也就是3秒内，完毕这个动作-->
$("#b2").click(function() {
$("#div").slideDown(3000);
});
<!--点击b3button，面板将会在隐藏与显示中切换，且300毫秒内，完毕这个动作-->
$("#b3").click(function() {
$("#div").slideToggle(300);
});
});
</script>
至此，整个开发流程说明完成
【jQuery】使用JQ来编写面板的淡入淡出效果的更多相关文章
- 【jQuery】使用JQ要准备的主要淡入淡出效果
jQuery是JavaScript 库.也就是JavaScript延期,加入满足不同效果的不断增长的需求.事实上质量JavaScript 下面写的一大JQ方案说明JQ. .基本目标 网页中有例如以下三 ...
- jQuery，您可以实现元素的淡入淡出效果。
fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() 用于淡入已隐藏的元素 $("button").click(func ...
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- 基于jquery实现的文字淡入淡出效果
这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- JQuery显示，隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...
- js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么
js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...
- 新手学习FFmpeg - 调用API编写实现多次淡入淡出效果的滤镜
前面几篇文章聊了聊FFmpeg的基础知识,我也是接触FFmpeg不久,除了时间处理之外,很多高深(滤镜)操作都没接触到.在学习时间处理的时候,都是通过在ffmpeg目前提供的avfilter基础上面修 ...
- Axure实现淡入淡出效果
小伙伴们有可能在各大网站看到淡入淡出效果的动画,比如淘宝.京东,淘宝每天会把各种打折促销.今日推荐.限时抢购等做成淡入淡入或者向右活动等类似翻页的效果放在首页,吸引顾客的眼球,那么如何使用Axure来 ...
- jQuery-4.动画篇---淡入淡出效果
jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...
随机推荐
- css3属性选择器总结
前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com ...
- Linux 下 Hadoop java api 问题
1. org.apache.hadoop.security.AccessControlException: Permission denied: user=opsuser, access=WRITE, ...
- c语言(3)--运算符&表达式&语句
计算机的本职工作是进行一系列的运算,C语言为不同的运算提供了不同的运算符! 1.那些运算符们 .基本运算符 算术运算符:+ - * / % ++ -- 赋值运算符:= 逗号运算符:, 关系运算符:& ...
- IO调度算法研究1
linux kernel 2.6之后提供了四种IO调度算法,每种调度算法都有其不同的特点和应用场景,系统使用者可以通过系统提供的接口,选择使用哪种IO调度算法,以及调整IO调度算法的参数,以达到最优的 ...
- Linux 动态库剖析
进程与 API 动态链接的共享库是 GNU/Linux® 的一个重要方面.该种库允许可执行文件在运行时动态访问外部函数,从而(通过在需要时才会引入函数的方式)减少它们对内存的总体占用.本文研究了创建和 ...
- android 自定义百度地图放大缩小
自定义实现Android百度地图的缩放图标,需要自定义一个缩放控件,实现效果如下: 这里的缩放效果,实现了点击按钮可以对地图的放大缩小,通过手势放大与缩小也控制缩放图标的可用状态.具体实现如下: zo ...
- ++i和i++哪个效率高？
这个问题需要分两种情况来解说: 1.当变量i的数据类型是c++语言默认提供的类型的话,他们的效率是一样的. int a,i=0; a=++i;汇编代码如下: int a,i=0; 01221A ...
- 阵列中条带(stripe)、stripe unit
摘抄:http://blog.sina.com.cn/s/blog_4a362d610100aed2.html 在磁盘阵列中,数据是以条带(stripe)的方式贯穿在磁盘阵列所有硬盘中的.这种数据的分 ...
- ExtJs 4 的filefield上传后 返回值success接受不正常
问题解决了,我修改了返回类型为setContentType("text/html")可以正确解析了,感到很奇怪,其他的地方使用setContentType("applic ...
- Sublime 操作技巧
吐槽一下:刚下载的subime不是等宽字体,空格.表达.字母i什么的都很窄,看着不方便: 根据网上说的换成等宽字体,试了好多种字体,字体变了.但宽度没变. 然后有装了soda,和相应的color-th ...