只是最基本的东西，没啥稀奇的，只是今天看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. 洛谷——P2657 [SCOI2009]windy数

    P2657 [SCOI2009]windy数 题目大意: windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之间,包括A和 ...

  2. centos 7.x 安装开源堡垒机Jumpserver

    环境 虚拟机 系统:centos 7 IP:192.168.168.8 目录:/opt 代理:nginx 数据库:mysql 版本大于等于 5.6    mariadb 版本大于等于 5.5.6 更新 ...

  3. VsCode 格式化插件配置

    Beautify 1.在工作目录下建立.jsbeautifyrc文件: { "brace_style": "none,preserve-inline", &qu ...

  4. Linux - 用户管理与文件权限

    目录 Linux - 用户管理与文件权限 创建普通用户 切换用户 userdel删除用户 sudo 命令 文件与目录权限 Linux权限的解读 目录权限 查看用户权限的命令 文件权限 修改权限的命令 ...

  5. java常见知识

    在JSP页面获取当前项目名称的方法: 方法1: <%= this.getServletContext().getContextPath() %> 方法2: 使用EL表达式 ${pageCo ...

  6. 基于Ubuntu系统的Tomcat部署项目

    第一步.拿到项目war包 第二步.上传到服务器/var/lib/tomcat8/webapps/ROOT目录下 第三步.使用命令解压war包 jar -xvf star1.0.0.war 第三步.重启 ...

  7. Leetcode 41.缺失的第一个正数

    缺失的第一个正数 给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0] 输出: 3 示例 2: 输入: [3,4,-1,1] 输出: 2 示例 3: 输入: ...

  8. CF410div2 A. Mike and palindrome

    /* CF410div2 A. Mike and palindrome http://codeforces.com/contest/798/problem/A 水题 */ #include <c ...

  9. Linux终止进程的工具kill/killall/pkill/xkill/skill用法区别（转）

    一. 终止进程的工具kill .killall.pkill.xkill 终止一个进程或终止一个正在运行的程序,一般是通过kill .killall.pkill.xkill等进行.比如一个程序已经死掉, ...

  10. React Native Mac配置指南

    步骤 http://facebook.github.io/react-native/docs/getting-started.html#content 依照React Native官网步骤一步步安装, ...