使用JQ来编写最基本的淡入淡出效果附演示动画


Posted in Javascript onOctober 31, 2014

jQuery是一个JavaScript 库,也就是对JavaScript的扩展,用来满足各种日益增加的不同特效需求。其实质就是JavaScript

下面来编写一个最基本的JQ程序来说明JQ。

一、基本目标

网页中有如下三个按钮,一个只能隐藏文本,一个只能显示文本,一个同时能隐藏与显示文本,点击一下显示,再点击一下隐藏,无限循环。

使用JQ来编写最基本的淡入淡出效果附演示动画

二、制作过程

1.首先你要到JQ官网中下载一个JQ支持文件放入你的站点文件夹。这个支持文件是jQuery1.11,可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11,而不是不兼容旧浏览器IE6的jQuery2。

2.整个网页代码如下,再分片段进行说明:

<!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" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
$(document).ready(function() { 
$("#hide").click(function() { 
$("#text").hide(); 
}); 
$("#show").click(function() { 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
$("#text").toggle(); 
}); 
}); 
</script> 

<!-- 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

--> 

<title>JQ淡出与显示</title> 

</head> 
<body> 

<p id="text"> 
被折腾的文本 
</p> 

<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body> 

</html>

(1)<body>部分

<head>部分主要是实现核心代码部分,放在后面来讲,先说<body>部分

<body> 
<!--这是定义一段ID为text的文本,便于脚本控制--> 
<p id="text"> 
被折腾的文本 
</p> 

<!--分别设置ID为hide,show,toggle的按钮--> 
<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body>

(2)<head>部分

<head> 
<!--网页的编码,声明要使用JQ--> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
<!--JQ的代码编写首先要用$(document).ready(function() {});去定义一个总函数,缺少这个函数提供的框架之后的东西无法执行--> 
$(document).ready(function() { 
<!--之后再于这个函数内编写需要的函数--> 
<!--对于ID为hide这个按钮的click动作进行函数的调用,之后的动作依旧放在这个一个函数的里面--> 
$("#hide").click(function() { 
<!--隐藏ID的为text的文本--> 
$("#text").hide(); 
}); 
$("#show").click(function() { 
<!--显示ID的为text的文本--> 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
<!--在隐藏与显示之间切换ID的为text的文本--> 
$("#text").toggle(); 
}); 
}); 
</script> 

lt;!--这段控制默认是显示还是不显示 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

-> 

<title>JQ淡出与显示</title> 

</head>
Javascript 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
jquery 选择器部分整理
Oct 28 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
angular实现form验证实例代码
Jan 17 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 #Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 #Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 #Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 #Javascript
JsRender实用入门教程
Oct 31 #Javascript
JsRender for object语法简介
Oct 31 #Javascript
JsRender for index循环索引用法详解
Oct 31 #Javascript
You might like
PHP生成静态页
2006/11/25 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
angularJs中datatable实现代码
2017/06/03 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
跟老齐学Python之用Python计算
2014/09/12 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Python print不能立即打印的解决方式
2020/02/19 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
如何查看python关键字
2021/01/17 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
2015年医德医风工作总结
2015/04/02 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript