.hide([duration][,complete])——目标元素的隐藏。

.show([duration][,complete])——目标元素的显示；

.toggle([duration][,complete])——当目标元素隐藏时则显示。否则隐藏。

注：可选參数[duration]为方法运行的时间区间；[,complete]为回调函数。

<!DOCTYPE html>

<html lang="zh_CN">

<head>

    <meta charset="UTF-8">

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

    <script src="js/jquery-2.1.3.min.js"></script>

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

    <style>

        div{

            background: #005599;

            width: 100px;

            height: 100px;

            margin: 5px;

            float: left;

        }

    </style>

</head>

<body>

<img src="images/g.jpg"/>

<button id="btn1">隐藏</button>

<button id="btn2">显示</button>

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

</body>

</html>

my.js代码部分：

/*显示与隐藏*/

$(document).ready(function(){

    //隐藏

    $('#btn1').click(function(){

        //$('img').hide();

        $('img').hide(1000);

    });

    //显示

    $('#btn2').click(function(){

        //$('img').show();

        $('img').show(1000);

    });

    //切换显示与隐藏

    $('#btn3').click(function(){

        //$('img').toggle();

        $('img').toggle(1000);

    });

    //利用hide()制作一个效果

    for(var i=0;i<5;i++){

        $("<div>").appendTo(document.body);

    }

    $('div').click(function(){

        $(this).hide(2000,function(){

            $(this).remove();

        })

    })

})

jQuery效果之显示与隐藏的更多相关文章

  1. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  2. jQuery控制元素显示、隐藏、切换、滑动的方法

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...

  3. jquery里面控制显示和隐藏 ___土狗toggle

    $("#hide").click(function(){ $("p").hide(); }); $("#show").click(funct ...

  4. jquery渐渐的显示、隐藏效果

    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...

  5. jQuery下的显示和隐藏

    因为太久没更新了,所以来放一点没意思的内容. 做的是jQuery框架的隐藏和显示,HTML如下: <ul> <li>1</li> <li>2</l ...

  6. jquery 判断元素显示或隐藏

    $().is(":hidden"); $().is(":visible");

  7. jquery点击显示或隐藏

    点击第一个dd,给第一li添加class,点击第二个dd,给第二个li添加class,以此类推 $(function(){     $("dd > a").click(fun ...

  8. vue类似tab切换的效果，显示和隐藏的判断。

    两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动

  9. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

随机推荐

  1. Vue2.0进阶组件 短信倒计时组件

    原本我想隔个几天再发文章,刚好今天项目上线,环境有问题,导致只有干等,刚好要为公司打造一套属于公司自己的一系列功能组件,这个使命就交给我了,大家也一直叫我来点干货,说实话我只是一个湿货,肚子里干一点就 ...

  2. ArcMAP中如何将16位保存的卫星底图，转变为8位表示

    首先说明,这种转换将会去除影像的投影像素的定义,并在转换后变为黑色的部分.16位的存储,一方面也是定义透明非数据像素点表示的方便.但是这种定义直接加大了影像的大小,不便于与CAD等软件进行交换数据.

  3. zookeeper 学习笔记1（转）

    本文转自https://www.cnblogs.com/fanguangdexiaoyuer/p/7077520.html 感谢作者 可以设置观察的操作:exists,getChildren,getD ...

  4. 【spring Boot】1.创建第一个springBoot项目

    入手springBoot,搭建第一个springBoot项目. 看官方文档还是有点别扭. https://docs.spring.io/spring-boot/docs/current-SNAPSHO ...

  5. 单元测试方法属性（Unit Test Method Attribute)

    Additional test attributes(可以在测试方法上使用的属性)As you have seen, the unit-testing subsystem within Visual ...

  6. jq和js中click 事件的几种方式总结和click事件的累加问题解决办法

     1:常见的三种绑定click事件: 第一种:$("#click").click(function(){ alert("Hello World  click") ...

  7. tensorflow cnn+rnn基本结构

    #CNN x = tf.placeholder(tf.float32,[None,input_node],name="x_input") y_ = tf.placeholder(t ...

  8. BeagleBone Black板第四课：简单LED控制实验

    BBB板第四课:简单LED控制实验 学习BBB板的终于目的是想像单片机一样做控制,但控制思路全然不一样(Linux下控制硬件设备实质就是对相关设备虚拟文件的读写).研究了几天头都大了还是没有进展,网上 ...

  9. .NET MVC执行过程 及 生命周期步骤

    1.网址路由比对 2.执行Controller与Action 3.执行View并返回结果 Request 请求到来 IIS 根据请求特征将处理权移交给 ASP.NET UrlRoutingModule ...

  10. ListView控件绑定DataSet

    DataSet数据集,数据缓存在客户端内存中,支持断开式连接.   在对DataSet做操作的时候,首先一定要修改其行的状态,然后执行SqlDataAdapter的Update方法,Update方法根 ...