本文与上一篇的《【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来编写面板的淡入淡出效果的更多相关文章

  1. 【jQuery】使用JQ要准备的主要淡入淡出效果

    jQuery是JavaScript 库.也就是JavaScript延期,加入满足不同效果的不断增长的需求.事实上质量JavaScript 下面写的一大JQ方案说明JQ. .基本目标 网页中有例如以下三 ...

  2. jQuery，您可以实现元素的淡入淡出效果。

    fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() 用于淡入已隐藏的元素 $("button").click(func ...

  3. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  4. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  5. JQuery显示，隐藏和淡入淡出效果

    为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...

  6. js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...

  7. 新手学习FFmpeg - 调用API编写实现多次淡入淡出效果的滤镜

    前面几篇文章聊了聊FFmpeg的基础知识,我也是接触FFmpeg不久,除了时间处理之外,很多高深(滤镜)操作都没接触到.在学习时间处理的时候,都是通过在ffmpeg目前提供的avfilter基础上面修 ...

  8. Axure实现淡入淡出效果

    小伙伴们有可能在各大网站看到淡入淡出效果的动画,比如淘宝.京东,淘宝每天会把各种打折促销.今日推荐.限时抢购等做成淡入淡入或者向右活动等类似翻页的效果放在首页,吸引顾客的眼球,那么如何使用Axure来 ...

  9. jQuery-4.动画篇---淡入淡出效果

    jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...

随机推荐

  1. 最近用的到的一些js的常用方法(简单的)

    由于新的项目开始了,是使用MVC 5.0 开发的,前端使用了两个主流的框架 UIKIT,Ignite UI(收费) 因为是mvc主要用json来交互,不能避免要对前端脚本进行操作,所以就将能用到的方法 ...

  2. zoj 1184

    硬币称重,经典,1.若被判平,左右所有硬币必正常:2.若判轻或判重,对应硬币被判轻-1.重记数+1:3.只有球只被判轻或判重,且次数跟天平不平衡次数相等,该球才能是坏的,否则必然是好的.且>0的 ...

  3. mysql安装详细步骤图解

    本文转自http://blog.csdn.net/fanyunlei/article/details/21454645 别看图多,其实mysql的安装十分简单,一路next即可,只是注意倒数第三步,设 ...

  4. [Jobdu] 题目1367：二叉搜索树的后序遍历序列

    题目描述: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 输入: 每个测试案例包括2行: 第一行为1个整数 ...

  5. AOP annotation

    1.xml文件 <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http ...

  6. 【MFC相关】MFC入门相关

    1.MFC的“匈牙利标识符命名法”,这是一个约定,可以增加代码的可读性: 声明或定义了一个类,那么这个类可以以“C”(class)为前缀,如CHelloWorldDlg类: 定义一个无符号型的局部变量 ...

  7. nrf51 SDK自带例程的解读

    简单的pwm电机控制示例 simple_pwm_motor_control_example 其实就是pwm控制led的亮度 1.首先设置gpiote 设置初始为高电平2.接着设置ppi 定时器time ...

  8. LintCode-比较字符串

    题目描述: 比较两个字符串A和B,确定A中是否包含B中所有的字符.字符串A和B中的字符都是 大写字母 注意事项 在 A 中出现的 B 字符串里的字符不需要连续或者有序. 样例 给出 A = " ...

  9. Trie三兄弟——标准Trie、压缩Trie、后缀Trie

    1.Trie导引 Trie树是一种基于树的数据结构,又称单词查找树.前缀树,字典树,是一种哈希树的变种.应用于字符串的统计与排序,经常被搜索引擎系统用于文本词频统计.用于存储字符串以便支持快速模式匹配 ...

  10. 17.1.2?Replication Formats 复制格式:

    17.1.2?Replication Formats 复制格式: 17.1.2.1 Advantages and Disadvantages of Statement-Based and Row-Ba ...