<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>显示与隐藏</title>

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

        <style>

        .me{

            position: absolute;

            left: %;

            top: %;

            margin-left: -200px;

            margin-top: -;

            width: 400px;

            height: 100px;

            background-color: orange;

            overflow: auto;

            padding: 10px;

        }

        </style>

        <script type="text/javascript">

            //页面加载完成简写形式

            $(function(){

                //其他动画效果  slideUp slideDown 拉窗帘

                //fadeOut fadeIn 渐出 渐入效果

            $("#toggle").on("click",function(){

                if($(".me").css("display")=="none")

                {

                    //$(".me").css("display","block");//显示

                    $(".me").show(); //动画显示 元素

                }

                else

                {

                    //$(".me").css("display","none");//隐藏

                    $(".me").hide(,function(){

                        alert("我隐藏起了!")

                    });//动画隐藏 元素 第二个参数 在执行完隐藏后执行

                }

            });

            })

        </script>

    <body>

        <button id="toggle">显示/隐藏</button>

        <div class="me">

        </div>

    </body>

</html>

jQuery学习-显示与隐藏的更多相关文章

  1. Jquery的显示与隐藏

    $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:&q ...

  2. jquery 学习笔记二 隐藏与显示

    css找到元素后是添加样式,而jquery找到元素后是添加形为. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  3. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  4. jQuery的显示和隐藏

    在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏例子: <! ...

  5. jquery统计显示或隐藏的元素个数

    统计显示的checkbox的数量: 统计隐藏的checkbox数量:

  6. 7.jQuery之显示与隐藏效果

    这里用到三个函数方法:show()   hide()  toggle() 注意点是三个方法里面的两个参数的使用,前一个参数是时间,表示显示速度:后一个参数是回调函数,只有前面的动画执行完之后,回调函数 ...

  7. jquery实现显示和隐藏toggle（）方法的使用

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. toggle显示与隐藏切换

    jQuery中显示与隐藏切换toggle方法 show与hide是一对互斥的方法.需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法.比如显示的元 ...

  9. JQuery学习高级

    ## 今日内容:     1. JQuery 高级         1. 动画         2. 遍历         3. 事件绑定         4. 案例         5. 插件 ## ...

随机推荐

  1. 在ubuntu中用apt-get安装LEMP栈(linux+nginx+mysql+php)

    在ubuntu上安装lamp大家应该都很熟悉了,但对于现在很流行的lemp栈怎么样用apt-get安装,这样介绍的文章的不多.下面我用Ubuntu 12.04 LTS为例来介绍下如何用apt-get安 ...

  2. Elasticsearch部分节点不能发现集群(脑裂)问题处理

    **现象描述** es1,es2,es3三台es组成一个集群,集群状态正常, 当es1 服务器重启后,es1不能加到集群中,自己选举自己为master,这就产生了es集群中所谓的“脑裂” , 把es1 ...

  3. Linux less/more命令详解

    less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻, 只能往后面看,但若使用了 less 时,就可以使用 [pageup] [pagedown] 等按键的功能来 ...

  4. multi_index_container

    转自:https://blog.csdn.net/buptman1/article/details/38657807 multi_index_container: Boost Multi-index ...

  5. RabbitMQ学习以及与Spring的集成(一)

    本文记录RabbitMQ服务的搭建过程. 想要使用RabbitMQ消息中间件服务.首先要安装RabbitMQ,可以在:https://www.rabbitmq.com/download.html根据安 ...

  6. Promise & Deferred Objects in JavaScript Pt.2: in Practice

    原文:http://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt2-practical-use Intr ...

  7. loli的搜索测试-4

    其实这已经是第四次搜索测试了...只不过上两次测试时我不在学校,扔两个链接吧: 测试-2:https://www.luogu.org/blog/user35178/loli-di-sou-suo-ce ...

  8. crontab定时执行

    一.crond简介 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动cro ...

  9. Ubuntu14.04更换阿里云源

    步骤很简单一共三步,如下所示: 第一.备份源文件(防止万一) sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 第二.修改源文件(这里的源 ...

  10. Spring源码分析（二十）准备环境

    摘要: 本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. prepareRefresh函数主要是做些准备工作,例如对系统属性及环 ...