基于jQuery实现最基本的淡入淡出效果实例
本文实例讲述了基于jQuery实现最基本的淡入淡出效果的方法。分享给大家供大家参考。具体分析如下：
jQuery是一个JavaScript 库，也就是对JavaScript的扩展，用来满足各种日益增加的不同特效需求。其实质就是JavaScript
下面来编写一个最基本的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>
<!--这段控制默认是显示还是不显示
<style type="text/css">
#text{
display:none
}
</style>
->
<title>JQ淡出与显示</title>
</head>
希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍基于jQuery实现淡入淡出效果轮播图，包括了基于jQuery实现淡入淡出效果轮播图的使用技巧和注意事项，需要的朋友参考一下 用JavaScript做了平滑切换的焦点轮播图之后，用jQuery写了个简单的淡入淡出的轮播图，代码没有做优化，html结构稍微有一些调整，图片部分用ul替换了之前用的div。 html结构如下： css设置： JavaScript代码： 精彩专题分享：
-
本文向大家介绍基于Jquery实现焦点图淡出淡入效果，包括了基于Jquery实现焦点图淡出淡入效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了基于Jquery实现焦点图淡出淡入效果代码。分享给大家供大家参考。具体如下： 这个容器用了百分比宽度，图片始终保持居中处理，定宽或者自适应宽度都是可以的。 兼容到IE6+以上浏览器，有淡出淡入速度和切换间隔两个参数可以改。 运行效果截图如下： 具
-
本文向大家介绍jquery实现淡入淡出轮播图效果，包括了jquery实现淡入淡出轮播图效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现淡入淡出轮播图的具体代码，供大家参考，具体内容如下 如题所述，直接上代码 其实淡入淡出轮播图的核心思想就是获取到当前的索引，根据索引找出图片的索引然后更改索引达到一个图片显示 其他图片消失 然后轮流交替进行的。最主要的核心思想在上面
-
本文向大家介绍jQuery实现图片文字淡入淡出效果，包括了jQuery实现图片文字淡入淡出效果的使用技巧和注意事项，需要的朋友参考一下 本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果，分享给大家供大家参考，具体内容如下 1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2、实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在
-
本文向大家介绍jquery实现的淡入淡出下拉菜单效果，包括了jquery实现的淡入淡出下拉菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现的淡入淡出下拉菜单效果。分享给大家供大家参考。具体如下： 这是一款jQuery带有淡入淡出效果的下拉菜单，可作为一个下拉导航菜单的模板，移动鼠标到一级主菜单上看一看，在有包括二级子菜单的菜单项上悬停时，二级菜单渐变显示出来，兼容性
-
本文向大家介绍js如何实现淡入淡出效果，包括了js如何实现淡入淡出效果的使用技巧和注意事项，需要的朋友参考一下 淡入淡出效果，在日常项目中经常用到，可惜原生JS没有类似的方法，而有时小的页面并不值得引入一个jQuery库，所以就自己写了一个，已封装，有用得着的朋友，可以直接使用。代码中另附有一个设置元素透明度的方法， 是按IE规则(0~100)设置， 若改成标准设置方法(0.00~1.00),，下