效果图：

<%@ 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. 解决FPDF报错：FPDF error: Not a JPEG file / FPDF error: Not a PNG file

    最近有个项目需要用到FPDF,但是输出的时候报错: FPDF error: Not a JPEG file: http://***/data/attachment/forum/201603/19/10 ...

  2. 使用SQLyog远程访问mysql数据库设置

    mysql数据库远程访问设置方法 1.修改localhost更改 "mysql" 数据库里的 "user" 表里的 "host" 项,从&q ...

  3. Only the original thread that created a view hierarchy can touch its views

    在调试软件的时候出现如下的错误: 01-05 20:53:36.492: E/ZZShip(2043): android.view.ViewRootImpl$CalledFromWrongThread ...

  4. sysfs接口函数到建立_DEVICE_ATTR

    sysfs接口函数到建立_DEVICE_ATTR 最近在弄Sensor驱动,看过一个某厂家的成品驱动,里面实现的全都是sysfs接口,hal层利用sysfs生成的接口,对Sensor进行操作. 说道s ...

  5. 【BZOJ 1015】[JSOI2008]星球大战starwar

    Description 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过 ...

  6. iOS sqlite 增删改查 简单封装(基于 FMDB)

    /** *  对 sqlite 的使用进行简单封装,仅涉及简单的单表 增删改查 * *  基于 FMDB * *  操作基于 model ,数据库表字段与 model 属性一一对应,对 model 整 ...

  7. 基于Apache2配置Radius认证

    基于Apache配置RADIUS有两个插件可用:mod_auth_radius和mod_auth_xradius,推荐使用mod_auth_xradius,mod_auth_radius不支持多个RA ...

  8. 1187: [HNOI2007]神奇游乐园 - BZOJ

    Description 经历了一段艰辛的旅程后,主人公小P乘坐飞艇返回.在返回的途中,小P发现在漫无边际的沙漠中,有一块狭长的绿地特别显眼.往下仔细一看,才发现这是一个游乐场,专为旅途中疲惫的人设计. ...

  9. ppshu

    全部书籍已经下载完毕! http://3cvpkfx4gdnkcduj.onion/ https://3cvpkfx4gdnkcduj.onion.cab/ https://3cvpkfx4gdnkc ...

  10. 什么是 .manifest 文件

    恩,为了大家都能很方便的理解,我将尽量简单通俗地进行描述. [现象]对这个问题的研究是起源于这么一个现象:当你用VC++2005(或者其它.NET)写程序后,在自己的计算机上能毫无问题地运行,但是当把 ...