基于jQuery实现最基本的淡入淡出效果实例


Posted in Javascript onFebruary 02, 2015

本文实例讲述了基于jQuery实现最基本的淡入淡出效果的方法。分享给大家供大家参考。具体分析如下:

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

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

一、基本目标

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

基于jQuery实现最基本的淡入淡出效果实例

二、制作过程

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程序设计有所帮助。

Javascript 相关文章推荐
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 #Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 #Javascript
JavaScript分秒倒计时器实现方法
Feb 02 #Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 #Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 #Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 #Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 #Javascript
You might like
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
解析yii数据库的增删查改
2013/06/20 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python实现简易动态时钟
2018/11/19 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
opencv实现简单人脸识别
2021/02/19 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
给孩子的新年寄语
2014/04/08 职场文书
学校春季防火方案
2014/06/08 职场文书
小学社会实践活动总结
2014/07/03 职场文书
刘公岛导游词
2015/02/05 职场文书
保卫工作个人总结
2015/03/03 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书