效果图：

<%@ 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. Mongodb学习使用记录

    在学习使用Mongodb中,对map和reduce的定义,以及对 mapReduce() 方法的调用: >map #在直接输入map时会出现一个'map is not defined'的异常错误 ...

  2. linux内核编译,内核参数修改

    核心(kernel):/boot/vmlinuz-version version 带发行包版本,本地版本内核模块(kernel object): /lib/modules/version/ 内核设计: ...

  3. 字符串转换成整型数 atoi()

    题目说明: 1.设计函数: int atoi(const char *nptr); 2.功能:把字符串转换成整型数,atoi()会扫描参数nptr字符串,如果第一个非空格字符存在, 是数字或者正负号则 ...

  4. ubuntu下下载并安装H265（hm.x.x代码和X265代码）

    H265,现今是High Efficiency Video Coding的别称,详细的概述见维基百科,详细的开发见官方网站. 一.下载并编译官方的测试源码HM.x.x: 1 ubuntu下安装svn: ...

  5. hdu 4679 Terrorist’s destroy 树形DP

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=4679 题意:给定一颗树,每条边有一个权值w,问切掉哪条边之后,分成的两颗树的较大的直径*切掉边的权值最小? ...

  6. OFBIZ bug_create-component ERROR

    开发环境:win7 64位 Eclipse 运行create-component,报一下错误: Buildfile: F:\workspace\opensource\apache-obiz\apach ...

  7. psutil--跨平台的进程管理

    原文地址:http://www.jianshu.com/p/64e265f663f6 Python处理Windows进程 psutil(Python system and process utilit ...

  8. mysql子查询优化

    ,,,) ) LIMIT 第一种方式in where:2000ms SELECT COUNT(*) AS tp_count FROM xxx_b2c_orders o ,,,) and from xx ...

  9. JSON操作，转载

    http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html#_label0

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

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