Jquery动画第一部分
效果图：
<%@ 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动画第一部分的更多相关文章
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
- jquery动画，基础以及我发现的新大陆
$.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- jQuery动画特效笔记
show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...
- 有时候就是看不进论文-jQuery动画特效篇&MySQL
hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...
- 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效
1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...
- jQuery 动画的执行
jQuery 动画的执行 <%@ page language="java" import="java.util.*" pageEncoding=" ...
- python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- JQuery动画详解（四）
一:基本动画show()显示隐藏的匹配元素.这个就是 'show( speed, [callback] )' 无动画的版本.如果选择的元素是可见的,这个方法将不会改变任何东西.无论这个元素是通过hid ...
随机推荐
- 常用mysql命令大全
常用的MySQL命令大全 一.连接MySQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1.例1:连接到本机上的MYSQL. 首先在打开DOS窗口,然后进入目录 mysqlbin,再 ...
- MySQL Partition分区扫盲
MySQL从5..3开始支持Partition,你可以使用如下命令来确认你的版本是否支持Partition: mysql> SHOW VARIABLES LIKE '%partition%'; ...
- CentOS安装配置Git服务器(gitosis)
主要参考: http://blog.csdn.net/dengjianqiang2011/article/details/9260435 辅助参考: http://freeloda.blog.51ct ...
- 【学习总结】【多线程】 线程 & 进程 & NSThread（多线程的一套API）
一.进程和线程 1.什么是进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开 Chrome.Xcode,系统就会分别启动2个进 ...
- javascript eval 执行过程
当执行eval时,会执行如下过程 eval(x): 1.如果 x的类型不是string,那么会return x; 2.把x转换成 ecmascript 代码.如果转换失败,责抛出SyntaxError ...
- shell复习笔记----用户管理
$ who 可以知道系统上有多少登陆 $who |wc -l 计算用户个数 注意:|是管道符号,可以在两个程序之间建立管道(pipeline):who 的输出,成了 wc 的输入, wc 所列出 ...
- 3141: [Hnoi2013]旅行 - BZOJ
Description Input 第一行为两个空格隔开的正整数n, m,表示旅行的城市数与旅行所花的月数.接下来n行,其中第 i行包含两个空格隔开的整数Ai和Bi,Ai表示他第i个去的城市编号.Bi ...
- 1014: [JSOI2008]火星人prefix - BZOJ
Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...
- uva 567
Floyd 算法 就输入麻烦点 #include <iostream> #include <cstring> #include <cstdlib> #inclu ...
- 批量扫描互联网无线路由设备telnet，并获取WIFI密码
批量扫描互联网无线路由设备telnet,并获取WIFI密码 http://lcx.cc/?i=4513