只是最基本的东西，没啥稀奇的，只是今天看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. openstack——horizon篇

    一.horizon 介绍:       理解 horizon   Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 Horizone 所提供的 DashB ...

  2. Python编码格式导致的csv读取错误

    Python编码格式导致的csv读取错误(pandas.read_csv) 本文记录python小白我今天遇到的这两个问题(csv.reader和pandas.csv_read): pandas模块“ ...

  3. sysbench_cpu

    5 core : 25.2848s [root@jiangyi01.sqa.zmf /home/ahao.mah/ALIOS_QA/tools/sysbench] #sysbench --num-th ...

  4. SqlServer大数据的分区方案

    这里介绍的是大数据量的维护日志的分区解决方案: 每个月1张数据表,1个分组文件.31个分区(按每天1个分区).... 为了日后维护方便,直接删除旧的日志数据文件就可以,而不需要去做分区压缩. --用的 ...

  5. Problem 21

    Problem 21 https://projecteuler.net/problem=21 Let d(n) be defined as the sum of proper divisors of  ...

  6. 【codeforces 510C】Fox And Names

    [题目链接]:http://codeforces.com/contest/510/problem/C [题意] 给你n个字符串; 问你要怎么修改字典序; (即原本是a,b,c..z现在你可以修改每个字 ...

  7. Android第三方开源图片裁剪截取：cropper

     Android第三方开源图片裁剪截取:cropper 很多app都需要裁剪截取图片作为头像.logo之类,而cropper是github上的一个针对Android平台的.第三方开源图片裁剪截取项 ...

  8. hdu 2242双联通分量+树形dp

    /*先求出双联通缩点,然后进行树形dp*/ #include<stdio.h> #include<string.h> #include<math.h> #defin ...

  9. [bzoj1812][IOI2006]riv_多叉树转二叉树_树形dp

    riv bzoj-1812 IOI-2006 题目大意:给定一棵n个点树,要求在上面建立k个收集站.点有点权,边有边权,整棵树的代价是每个点的点权乘以它和它的最近的祖先收集站的距离积的和. 注释:$1 ...

  10. RPC服务框架探索之Thrift

    前言架构服务化后,需要实现一套方便调用各服务的框架,现在开源如日中天,优先会寻找开源实现,如果没有合适自家公司业务的,才会考虑从零开发,尤其是一切以KPI为准绳的公司,谁会跟钱过不去?N个月之前,公司 ...