读<jquery 权威指南>[3]-动画
一、 显示与隐藏——hide(),show()
1. 方法:
- hide(speed,[callback]);
- show(speed,[callback]);
说明:这两个方法还可以实现带动画效果的显示隐藏。speed可以是“slow"(600毫秒)、"normal"(400毫秒)、"fast"(200毫秒),可以直接是毫秒数。
callback是动画执行完的回调函数。
2.实例:
<style type="text/css">
body {
font-size: 13px;
} .artFram {
border: solid 1px #ccc;
background-color: #eee;
width: 260px;
padding: 8px;
word-break: break-all;
} .artList {
line-height: .8em;
}
</style>
<div class="artFram">
<div class="artList">
<span> </span>
<span>jQuery</span>
<span style="display:none">--write less,do more.</span>
<a href="javascript:void(0)">显示</a>
</div>
</div>
html
<script type="text/javascript">
$(function () {
var $link = $(".artList a");
var $hide = $(".artList :eq(2)");
$link.click(function () {
if ($(this).html() == "显示") {
$(this).html("隐藏");
$hide.show(1000,function(){alert("显示")});
} else {
$(this).html("显示");
$hide.hide(800, function () { alert("隐藏")});
}
})
});
</script>
二、切换显示隐藏——toggle()
1. 方法
- toggle():无参数,直接切换显示隐藏状态;
- toggle(switch):switch是布尔值,true显示元素,false隐藏元素。
- toggle(speed,[callback]):speed为切换速度;callback为动画效果执行之后的回调函数。
说明:当以动画效果展示时,元素的width,height,padding,margin都以动画形式展示。
2. 实例:
<div class="divFrame">
<div class="divMenu">
<input id="Button1" type="button" value="无参数"/><br />
<input id="Button2" type="button" value="逻辑显示" /><br />
<input id="Button3" type="button" value="动画显示"/>
</div>
<div class="divContent">
<img src="Images/img03.jpg" alt="" />
</div>
</div>
html
<script type="text/javascript">
var isShow = false;
var title = $(".divTitle");
var content = $(".divContent"); $(function () {
title.click(function () {
if (isShow) {
$("img").slideUp("normal", function () {
$("#divTip").html("关闭成功");
isShow = false;
});
} else {
$("img").slideDown("normal");
$("#divTip").html("");
isShow = true;
}
});
});
</script>
三、滑动效果——slide
- slideUp(speed,[callback]):向上滑动,减小元素高度至0
- slideDow(speed,[callback]):向下滑动,增大元素高度。
- slideToggle(speed,[callback]):以动画效果切换元素高度。
四、淡入淡出——fade
1. 淡入淡出方法
- fadeIn(speed,[callback]):淡入,透明度由0.0到1.0;
- fadeOut(speed,[callback]):淡出,透明度由1.0到0.0;
实例:
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" value="fadeIn" class="btn" />
<input id="Button2" type="button" value="fadeOut" class="btn" />
</div>
<div class="divContent">
<div class="divTip"></div>
<img src="Images/img05.jpg" alt="" title="风景图片" style="display:none;" />
</div>
</div>
html
<script type="text/javascript">
$(function () {
$img = $("img"); //图片元素对象
$tip = $(".divTip"); //提示元素对象
$("#Button1").click(function () { //第一个按钮单击事件
$tip.html(""); //清空提示内容
//在2000毫秒中淡入图片,并执行一个回调函数
$img.fadeIn(2000, function () {
$tip.html("淡入成功!");
})
})
$("#Button2").click(function () { //第二个按钮单击事件
$tip.html(""); //清空提示内容
//在2000毫秒中淡出图片,并执行一个回调函数
$img.fadeOut(2000, function () {
$tip.html("淡出成功!");
})
})
})
</script>
2. fadeTo(speed,opacity,[callback]):以动画效果将透明度设置为一个指定值,还可以设置回调函数。
实例:
<input type="button" id="btn" value="click" />
<div class="divContent">
<img src="Images/img06.jpg" alt="" title="风景图片" />
</div>
html
<script type="text/javascript">
$(function () {
var opacity = 0.0;
$("#btn").click(function () {
if (opacity >= 1.0) {
opacity = 0.0;
} else {
opacity += opacity + 0.2;
}
$("img").fadeTo("normal", opacity);
});
});
</script>
五、自定义动画——animate
1.方法 :
animate(params,[duration],[easing],[callback])
说明:param表示要调整的属性键值对,duration表示速度,easing表示动画插件,callback表示动画效果完成后的回调效果。
注意:
params的属性名要使用骆驼写法,例如font-size要写成fontSize。
如果想以动画形式移动元素位置,则position必须设置为relative或者absolute。
队列动画:在元素中执行一个或者多个animate方法。
读<jquery 权威指南>[3]-动画的更多相关文章
- 读<jquery 权威指南>[1]-选择器及DOM操作
今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...
- 读<jquery 权威指南>[4]-Ajax
一.获取异步数据 jQuery可以从服务器异步获得静态数据. ①load() $.load(url,data,callback) url要加载的页面地址, data发送到服务器的数据key/value ...
- 读<jQuery 权威指南>[5]-插件
一.说明 jQuery插件官网:http://plugins.jquery.com/ 使用插件时引用顺序:插件引用要位于主jquery库之后. 二.插件应用实例 演示插件jquery.validate ...
- 读<jQuery 权威指南>[6]--实用工具函数
官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each——遍历 $.each(obj,function(param1,pa ...
- 读<jquery 权威指南>[7]-性能优化与最佳实践
一.优化选择器执行速度 1. 优先使用ID选择器和标记选择器 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选 ...
- 读<jquery 权威指南>[2]-事件
1. 事件冒泡 阻止事件冒泡的两种方式: event.stopPropagation(); return false ; 2. 绑定事件——bind(type,[data],function) ty ...
- 跟小静读《jQuery权威指南》——目录
前言 2014年开始了,年底给自己制订的学习计划,第一步先从学习<jQuery权威指南>开始. jQuery大家都很比较熟悉,但是我经常是边用的时候边对照着API,这次找本书通读一遍,记录 ...
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色 < ...
- [在读] javascript权威指南第六版
耽搁了有大半年没看,记得当时看到5分之2了吧.权威指南是不管读几遍都能觉得有新收获的书^^
随机推荐
- 关于Thread.getContextClassLoader的使用场景问题
Thread context class loader存在的目的主要是为了解决parent delegation机制下无法干净的解决的问题.假如有下述委派链: ClassLoader A -> ...
- C++之路进阶——bzoj3876(支线剧情)
F.A.Qs Home Discuss ProblemSet Status Ranklist Contest ModifyUser hyxzc Logout 捐赠本站 Notice:由于本OJ建立在 ...
- Web动画API教程1:创建基本动画
本人转载自: Web动画API教程1:创建基本动画
- 说一下linux中shell的后台进程与前台进程
环境: 操作系统:archlinux; 终端模拟器:rxvt-unicode(urxvt); shell:bash; 这里所说的后台进程是指在命令行后面加一个 ampersand(&),前台进 ...
- jqueryui引用出错(base is not a constructor,widget no found)
出错的原因,主要是引用顺序出错. 正确顺序如下: query本身必须放在第一位: <script src="../../../Scripts/Jquery1.7.2/jquery-1. ...
- 指定YUM安装包的体系结构或版本
在单一体系结构下同时安装32位和64位包echo ‘multilib_policy=all’ >> /etc/yum.conf 指定体系结构 查看当前系统体系结构[root@oracle ...
- Android生成一维码
BitmapUtil.java里面添加个方法 /** * 用于将给定的内容生成成一维码 注:目前生成内容为中文的话将直接报错,要修改底层jar包的内容 * * @param content 将要生成一 ...
- Dynamics AX 2012 R2 设置E-Mail
恰当地使用E-Mail,可以使系统看起来更专业,对用户更友好.AX中主要有两种发送E-Mail的方法:SMTP和MAPI. MAPI(Messaging Application Pro ...
- 报错:org.eclipse.swt.SWTError: No more handles at org.eclipse.swt.SWT.error(SWT.java:4517)
在Mars.Kepler的版本裡,時常會出現以下錯誤導致eclipse無法進行運作 Error.log org.eclipse.swt.SWTError: No more handles at ...
- Uva 10537 过路费
题目链接:http://vjudge.net/contest/143062#problem/C 题意: 给定一个无向图,大写字母是城市,小写字母是村庄,经过城市交过路费为当前货物的%5,路过村庄固定交 ...