只是最基本的东西，没啥稀奇的，只是今天看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. 从 UI 交互角度说语音识别产品

    语言是人类进化的主要特征,而人工智能拥有了说话的能力也是科技进步的一个特征.在很多科幻的电影里面,我们可以看到人工智能的身影.在电影 her 里面见到的人工智能,真的让人叹为观止,他可以随意的和你聊天 ...

  2. SqlServer Function

    set quoted_identifier on; set ansi_nulls on; go create function [dbo].[Get_StrArrayStrOfIndex] ( @st ...

  3. 洛谷——P1063 能量项链

    P1063 能量项链 题目描述 在MarsMars星球上,每个MarsMars人都随身佩带着一串能量项链.在项链上有NN颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对 ...

  4. Scrapy下载器中间件用法示例

    1.爬虫文件httpbin.py # -*- coding: utf-8 -*- import scrapy class HttpbinSpider(scrapy.Spider): name = 'h ...

  5. _initialize() 区别 __construct()

    _initialize()方法是在任何方法执行之前,都要执行的,当然也包括 __construct构造函数. 也就是说如果存在_initialize()函数,调用对象的任何方法都会导致_initial ...

  6. php 导出Excel 不用安装插件、开启配置

    function export_csv($filename, $data) { header("Content-type:text/csv"); header("Cont ...

  7. 3D全景之ThreeJs

    3D全景之ThreeJs 一.前言 随着H5越来越多的被应用到各个领域,3D也越来越频繁的出现在各个H5案例中,今天我们就来讨论一下3D全景的实现. 据百度百科上介绍:720全景是视角超过人的正常视角 ...

  8. Spring MVC-集成（Integration）-生成Excel示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_excel.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示 ...

  9. N天学习一个linux命令之umask

    前言 umask不是linux命令,而是shell内置的指令,俗称用户权限掩码,用于对用户创建的文件和目录设置默认权限.默认的权限掩码是0022,也就是说新创建的文件权限是0644,新创建的目录权限是 ...

  10. 任务调度分配题两道 POJ 1973 POJ 1180（斜率优化复习）

    POJ 1973 这道题以前做过的.今儿重做一次.由于每个程序员要么做A,要么做B,可以联想到0/1背包(谢谢N巨).这样,可以设状态 dp[i][j]为i个程序员做j个A项目同时,最多可做多少个B项 ...