效果图：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

div.ex

{

background-color:#e5eecc;

padding:7px;

border:solid 1px #c3c3c3;

}

</style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <p>点击我会隐藏！！</p>

       <p id="p1">你好</p>

        <button type="button" class="ea">Click me</button>

        嗯嗯 是的、、

    </div>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

<br/>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

<br/>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

        <br/>

<h3>中国办事处</h3>

<div class="ex">

<button class="hide" type="button">隐藏</button>

<p>联系人：张先生<br />

北三环中路  号<br />

北京</p>

</div>

<h3>美国办事处</h3>

<div class="ex">

<button class="hide" type="button">隐藏</button>

<p>联系人：David<br />

第五大街  号<br />

纽约</p>

</div>

    </form>

</body>

</html>

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

<script>

    //点击后会隐藏

    $(document).ready(function () {

        $("p").click(function () {

            $(this).hide();

        })

    })

    //点击按钮后局部隐藏

    $(document).ready(function () {

        $("button").click(function () {   //点击按钮就会隐藏

            $("#p1").hide();

        });

    });

    //点击按钮后使三个矩形淡出

    $(document).ready(function () {

        $("button").click(function () {

            $("#div1").fadeOut(); //fadeOut()淡出

            $("#div2").fadeOut("slow");

            $("#div3").fadeOut();

        });

    });

    //隐藏局部文本

    $(document).ready(function () {

        $(".ex .hide").click(function () {  //找到class为ex下的class为hide的按钮,点击以后这个按钮的父级Class为ex的便会淡出

            $(this).parents(".ex").fadeOut();

        });

    });

    </script>

Jquery动画第一部分的更多相关文章

  1. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  2. jquery动画，基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  3. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  4. jQuery动画特效笔记

    show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...

  5. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

  6. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  7. jQuery 动画的执行

    jQuery 动画的执行 <%@ page language="java" import="java.util.*" pageEncoding=" ...

  8. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  9. JQuery动画详解（四）

    一:基本动画show()显示隐藏的匹配元素.这个就是 'show( speed, [callback] )' 无动画的版本.如果选择的元素是可见的,这个方法将不会改变任何东西.无论这个元素是通过hid ...

随机推荐

  1. mysql实例---sql语句中使用@变量

    本文介绍下,在mysql语句中使用@变量的一个例子,学习下这个特殊变量的用法,有需要的朋友参考下吧. 要求: 计算用户距上次访问的天数,根据imei号区分不同的用户,如果时间段内只有一次访问则为0. ...

  2. RabbitMQ基础总结

    MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们.消 息传递指的是程序之 ...

  3. 1. Linux驱动开发之开篇--Makefile

    基本Makefile假设现在有3个文件,file2.h是函数声明,file2.c是函数定义,文件file1.c调用file2.c中的函数.则Makefile文件的编写如下: helloworld:fi ...

  4. exec php

    $m = memory_get_usage(); echo $m; require_once('include/entryPoint.php'); // for ($i=0; $i < 5000 ...

  5. C#.Net EF实体框架入门视频教程

    当前位置: 主页 > 编程开发 > C_VC视频教程 > C#.Net EF实体框架入门视频教程 > kingstone金士顿手机内存卡16G仅65元 1.EF实体框架之增加查 ...

  6. 查看某一个点是否在某个多边形内 使用ST_Contains函数

    查看某一个点是否在某个多边形内  使用ST_Contains函数 --LINESTRING ( 121.312350 30.971457 , 121.156783 31.092221 , 121.35 ...

  7. EXTJS 4.2 资料 控件之combo 联动

    写两个数据源: 1.IM_ST_Module.js { success:true, data:[ { ModuleId: '1', ModuleName: '资讯' } , { ModuleId: ' ...

  8. 解决mysql中表字符集gbk，列字符集Latin1，python查询乱码问题

    最近在公司碰到一个异常蛋疼的情况,mysql数据库中,数据库和表的字符集都是'gbk',但是列的字符集却是'latin1',于是蛋疼的事情出现了. 无论我连接字符串的`charset`设置为`gbk` ...

  9. 深入浅出百度地图API开发系列（2）：创建地图

    上一篇文章里,先介绍了一下百度地图API开发所涉及到的一些基础概念,包括投影,坐标系等基础概念,再有了这些基础后,我们可以开始开发自己的web地图了.先来个代码示例(建议大家都是用百度地图API大众版 ...

  10. 【数学/扩展欧几里得/线性求逆元】[Sdoi2008]沙拉公主的困惑

    Description 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞票.房地产第一大户沙拉公主决定预测一下大富翁国现 ...