<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="utf-8"/>

    <title></title>

    <script src="../js/jquery-1.10.2.js"></script>

    <script>

        $(function(){

            $("input").click(function(){

                $("div").hide(3000);

                $("div").show(3000);

                $("div").toggle(3000);

                //上面三个改变的是长，宽和透明度

                $("div").slideDown(3000);

                $("div").slideUp(3000);

                $("div").slideToggle(3000);

                //上面三个改变的是长

                $("div").fadeIn(3000);

                $("div").fadeOut(3000);

                $("div").fadeTo(3000,0.3);

                $("div").fadeToggle(3000);

                //上面四个改变的是透明度，但是需要注意上面这四种方法中div从display：none;直接变成有长宽的透明度为零的块级元素，然后在改变透明度

            })

        })

    </script>

    <style>

        div{width:200px;height:200px;background-color: blue;

            display: none;

        }

    </style>

</head>

<body>

    <div></div>

    <input type="button" value="点我"/>

</body>

</html>

jquery的各种隐藏显现动画的区别的更多相关文章

  1. jquery中使元素显示和隐藏方法之间的区别

    在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...

  2. JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  3. jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画

    jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...

  4. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  5. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  6. jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别

    大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...

  7. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  8. Jquery库自带的动画效果方法记录

    1.显示和隐藏hide()和show() <script type="text/javascript">             $(function() {      ...

  9. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

随机推荐

  1. 《数据结构与算法Python语言描述》习题第二章第三题（python版）

    ADT Rational: #定义有理数的抽象数据类型 Rational(self, int num, int den) #构造有理数num/den +(self, Rational r2) #求出本 ...

  2. php和js中json的编码和解码

    php中 1)编码 $jsonStr = json_encode($array) 2)解码 $arr = json_decode($jsonStr) <?php echo json_encode ...

  3. php实现设计模式之 原型模式

    <?php /* * 原型模式:通过复制已经存在的对象来创建新对象. * 通过原型实例指定创建对象的种类,并且通过copy这些原型创建信的对象 * 是创建型模式 * 有的时候创建一个对象有很多步 ...

  4. ABP导航源码分析

    按步骤看: 1,在Global.asax中执行: base.Application_Start(sender, e); 2,在AbpWebApplication类的Application_Start( ...

  5. Kerberos简介

    Kerberos协议: Kerberos协议主要用于计算机网络的身份鉴别(Authentication), 其特点是用户只需输入一次身份验证信息就可以凭借此验证获得的票据(ticket-grantin ...

  6. http 缓存相关学习

    在面试中被问到好多缓存的问题  200 cache cookies 304(304 和 200 cache的区别) cookies在什么时候创建  发送  等等  自己回答的并不是很好 这次仔细的学习 ...

  7. wampserver安装配置

    按步骤安装--选择指定浏览器-安装成功后显示绿色图标: 打开浏览器:将文件夹移入wampserver安装路径的www文件夹中:找到电脑IP 在手机端访问 IP/文件夹/demo.html即可

  8. asp.net mvc 中 一种简单的 URL 重写

    asp.net mvc 中 一种简单的 URL 重写 Intro 在项目中想增加一个公告的功能,但是又不想直接用默认带的那种路由,感觉好low逼,想弄成那种伪静态化的路由 (别问我为什么不直接静态化, ...

  9. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  10. centos7搭建自己的yum源

      http://www.wenbin.cf/post/37/ 1. 安装nginx,createrepo yum install nginx -y yum install createrepo -y ...