只是最基本的东西，没啥稀奇的，只是今天看jquery教程的时候偶然看到show()和hide()是可以写两个参数的，

第一个参数是元素隐藏/显示的速度(单位：毫秒)，另一个是一个function类型。

例子如下，消失时会同时向上向左移动并且字体颜色逐渐淡化，元素还会还一直抖动，显示时相反，这种渐变效果挺可爱的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script type="text/javascript"  src="jquery-1.7.1.min.js"></script>

 </head>

 <body>

          <div>

            <h4>我喜欢吃的水果</h4>

            <ul>

                <li>苹果</li>

                <li>甘桔</li>

                <li>梨</li>

            </ul>

            <input id="hidval" type="hidden" value="0"/>

        </div>

        <script type="text/javascript">

            $(function () {

                $("h4").bind("click", function () {

                    //第一种写法

                    if ($("#hidval").val() == 0) {

                            $("ul").hide(3000,function()

                        {

                            $("#hidval").val(1);

                        });

                    } else {

                        $("ul").show(3000,function(){

                            $("#hidval").val(0);

                        });

                    }

                    //第二种写法

                    //$("ul").toggle(3000);

                })

            });

        </script>

 </body>

</html>

JQuery 使用.show()和.hide()做的可爱动画的更多相关文章

  1. [转] jQuery源码分析-如何做jQuery源码分析

    jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...

  2. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  3. window.requestAnimationFrame() ,做逐帧动画，你值得拥有

    window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重 ...

  4. jQuery animate方法开发极客标签Logo动画融合效果

    在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...

  5. UIView封装动画--iOS利用系统提供方法来做转场动画

    UIView封装动画--iOS利用系统提供方法来做转场动画 UIViewAnimationOptions option; if (isNext) { option=UIViewAnimationOpt ...

  6. 用Direct2D和DWM来做简单的动画效果2

    原文:用Direct2D和DWM来做简单的动画效果2 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detai ...

  7. 用Direct2D和DWM来做简单的动画效果

    原文:用Direct2D和DWM来做简单的动画效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detail ...

  8. WPF 后台代码做 TranslateTransform 的动画

    本文告诉大家,在后台代码,对 TranslateTransform 做动画的方法 今天小伙伴问我一个问题,说为什么相同的代码,如果设置到按钮上,是可以让按钮的某个属性变更,但是如果设置给 Transl ...

  9. 11.8 开课二个月零四天 （Jquery取属性值，做全选，去空格）

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

随机推荐

  1. servlet之@PostConstruct，@PreDestroy

    1.@PostConstruct说明 被@PostConstruct修饰的方法会在服务器加载Servlet的时候运行,并且只会被服务器调用一次,类似于Serclet的inti()方法.被@PostCo ...

  2. Going Home HDU - 1533（最大费用最小流）

    On a grid map there are n little men and n houses. In each unit time, every little man can move one ...

  3. Java 初学者

    在有C++和C#基础之下开始学习Java,主要记录了一些和C++C#不同的或不知到的点 栈对象必须初始化,否则会报错.(其他的则有默认值) byte占用8位,char占用16位 接口默认为public ...

  4. postgres主从配置

    运维开发技术交流群欢迎大家加入一起学习(QQ:722381733) 开始部署postgres主从(如果没不会安装postgres的请去上一个博文中查看) 这里我使用了两台服务器部署 主:192.168 ...

  5. NFA到DFA实例

    下面图使用NFA表示的状态转换图, 使用子集构造法,有如下过程, ε-closure(0) = {0, 1, 2, 3, 4, 6, 7}初始值,令为AA = {0, 1, 2, 3, 4, 6, 7 ...

  6. PAT 1101 Quick Sort

    There is a classical process named partition in the famous quick sort algorithm. In this process we ...

  7. 一个电商项目的Web服务化改造4：方案和架构，通用接口的定义和实现

        最近一直在做一个电商项目,需要把原有单系统架构的项目,改造成基于服务的架构,SOA.     有点挑战,做完了,会有很大进步. 上一篇,我们明确了我们的"规范和约定". 从 ...

  8. android 彩信附件添加删除

    http://blog.csdn.net/yuzhu_guan2012/article/details/6679154

  9. 关于OpenCV图像操作的默认参数问题

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51559490 在使用OpenCV以及其 ...

  10. iOS学习笔记18-CoreData你懂的

    一.CoreData介绍 CoreData是iOS5之后新出来的的一个框架, 是对SQLite进行一层封装升级后的一种数据持久化方式. 它提供了对象<-->关系映射的功能,即能够将OC对象 ...