效果图：

<%@ 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. 为 Web 设计师准备的 25+ 款扁平 UI 工具包

    Flat UI Kit by Riki Tanone (free) Flat UI Kit (PSD) by Devin Schulz (free) Eerste UI Kit (free) Metr ...

  2. select&pselect/poll&ppoll/epoll

    select/pselect, poll和epoll的区别 select,epoll,poll比较 select,poll,epoll进化 Handling of asynchronous event ...

  3. CentOS 6.5 安装与配置LAMP

    准备工作: 1.配置防火墙,开启80端口.3306端口vi /etc/sysconfig/iptables-A INPUT -m state --state NEW -m tcp -p tcp --d ...

  4. 微软职位内部推荐-Sr SDE-MODC-Beijing

    微软近期Open的职位: JOB TITLE: Senior Software Design EngineerDEPARTMENT: Microsoft Office Division ChinaIM ...

  5. sharepoint One-Time Passwords (windows basic authentication)

    //设计中,未完成 references: http://www.asp.net/web-api/overview/security/basic-authentication http://techn ...

  6. mvc权限，登陆，异常

    public class FilterOfPer : ActionFilterAttribute     {         public override void OnActionExecutin ...

  7. ios登陆界面

    代码较老,仅供参考 主要涉及的功能点有: 1.密码输入框要隐藏输入字符,以黑点代替,有时候会在边上设置一个按钮,让用户选择是否需要密文输入 2.Login时会检查输入框,若输入不合法,弹窗提示用户 3 ...

  8. [转载]C#中各种计时器

    1.使用 Stopwatch 类 (System.Diagnostics.Stopwatch) Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量多个时间间隔的总运行时间.在典型的 S ...

  9. js对象转到字符串

    var str = JSON.stringify(obj);

  10. iOS顶部滑动菜单：FDSlideBar 与NinaPagerView

    FDSlideBar 是一个顶部滑动菜单,如常见的网易.腾讯新闻等样式.该控件支持自定颜色.字体等多种样式风格.菜单间切换流畅,具有较好的体验性.下部的内容展示经过挣 扎,最后选择了 UITableV ...