效果图：

<%@ 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. Cassandra1.2文档学习（16）—— 模式的变化

    参考文档:http://www.datastax.com/documentation/cassandra/1.2/webhelp/index.html#cassandra/dml/dml_schema ...

  2. Linux下面对于VIM编辑器的代码折叠使用与screen

    VIM设置代码折叠 1. 折叠方式 可用选项 'foldmethod' 来设定折叠方式:set fdm=*****.有 6 种方法来选定折叠:          manual           手工 ...

  3. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  4. spark向量

    转自 1.本地向量MLlib的本地向量主要分为两种,DenseVector和SparseVector,顾名思义,前者是用来保存稠密向量,后者是用来保存稀疏向量,其创建方式主要有一下三种(三种方式均创建 ...

  5. 在emacs里用w3m浏览网页

    给w3m配置个~/.emacs老是暴错误,在配置里把这个注掉就OK了;(require 'mime-w3m) ;;支持w3m (add-to-list 'load-path "/usr/sh ...

  6. 通过 struct 成员地址 获取 struct 结构体地址

    1. 问题描述: 现在定义了一个结构体: struct Foo { int a; int b; }; Foo foo; 假如由于函数传参等原因,现在程序只能拿到 foo.b 的地址,这时想通过某种方法 ...

  7. O2O模式

    O2O即Online To Offline(在线离线/线上到线下) 是指将线下的商务机会与互联网结合,让互联网成为线下交易的前台,这个概念最早来源于美国.O2O的概念非常广 泛,既可涉及到线上,又可涉 ...

  8. 1043: [HAOI2008]下落的圆盘 - BZOJ

    Description有n个圆盘从天而降,后面落下的可以盖住前面的.求最后形成的封闭区域的周长.看下面这副图, 所有的红色线条的总长度即为所求.Input n ri xi y1 ... rn xn y ...

  9. VB逆向

    大家或许有所察觉了,随着我们课程的不断深入学习,我们感觉自身逆向的“内功”也在不断的增进! 我们从爆破入手,到现在逐步大家进入程序的内部,认识不同编译器开发的程序,探索不同的加密逻辑. 前边,我们的例 ...

  10. static函数与普通函数

    转自http://blog.163.com/sunshine_linting/blog/static/44893323201191294825184/ 全局变量(外部变量)的说明之前再冠以static ...