jQuery中的综合动画
所谓综合动画，就是在链式表达式依次执行相关animate函数，其中的参数是以键值对的方式存在的。
如下示例，就展示了一个基本的综合动画。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义简单动画</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="script/jquery-1.12.2.js"></script>
<style type="text/css">
#panel {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;
}
</style>
<!-- Date: 2016-03-29 -->
</head>
<body>
<div id="panel"></div>
<script type="text/javascript">
$(function() {
$("#panel").css("opacity", "0.5");
$("#panel").bind("click", (function() {
$(this).animate({
left : "400px",
height : "200px",
opacity : "1"
}, 3000).animate({
top : "200px",
width : "200px"
}, 3000).fadeOut("slow");
}));
});
</script>
</body>
</html>
jQuery中的综合动画的更多相关文章
- jQuery中的经典动画
show()方法和hide()方法是jQuery中的基本动画方法,hide()方法等于将css()方法设置display属性为none.如何让元素动起来呢,我们可以在show和hide里加入slow, ...
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果
- bootstrap课程7 jquery中结束之前动画用什么
bootstrap课程7 jquery中结束之前动画用什么 一.总结 一句话总结:stop()方法.$('.navs').not($('.navs').eq(idx)).stop().hide(100 ...
- jQuery中事件与动画
jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...
- jquery中stop停止动画笔记
jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法: $(selector).stop( ...
- jQuery中事件与动画的总结
1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是 ...
- jQuery 中的简单动画
制作动画常用方法: show("速度") 显示元素 hide("速度") 隐藏元素 toggle() 切换效果 例如下jQuery代 ...
- jquery 中fadeIn,fadeOut动画
我们在做首页banner图片播放的时候会使用fadeIn,fadeOut动画,这里需要注意的是: fadeIn作用相当于:display:list-item;opcity逐渐变为1 fadeOut作用 ...
- jQuery中自定义简单动画的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
随机推荐
- -_-#【Better JS Code】严格模式
要在整个脚本中启用严格模式,可以在顶部添加如下代码: "use strict"; 这行代码看起来像是字符串,而且也没有赋值给任何变量,但其实它是一个编译指示,用于告诉支持的 Jav ...
- javascript 基础学习整理 二 之 html对象总结，参考W3C
Anchor 对象 更改一个链接的文本.URL 以及 target 使用 focus() 和 blur() 向超链接添加快捷键 Document 对象 使用 document.write() 向输出流 ...
- 网络流（最大密集度子图，分数规划）：UvaLive 3709 Hard Life
John is a Chief Executive Officer at a privately owned medium size company. The owner of the company ...
- C#怎么得到主机名,IP,MAC
一:基础知识 a: Dns 类 提供简单的域名解析功能. Dns 类是一个静态类,它从 Internet 域名系统 (DNS) 检索关于特定主机的信息. 在 IPHostEntry 类的实例中返回来自 ...
- vijos P1243 生产产品（单调队列+DP）
P1243生产产品 描述 在经过一段时间的经营后,dd_engi的OI商店不满足于从别的供货商那里购买产 品放上货架,而要开始自己生产产品了!产品的生产需要M个步骤,每一个步骤都可以在N台机器 ...
- SRM149 - SRM150(少SRM150-DIV1-LV3)
SRM 149 DIV2 1000pt 题意: 对于n个人,第i人有pi的钱.将他们分成不超过四个组,每组统一交费x,对每个人,若他拥有的钱超过x则交费,否则不交费.问最多能使这些人交多少钱. 1&l ...
- 值得关注的 10 个 Python 英文博客
英文原文:http://pythontips.com/2013/07/31/10-python-blogs-worth-following/ 中文翻译参考: http://python.jobbole ...
- BASH_SOURCE 用法
参考 bash少见的用法 http://blog.csdn.net/wonderisland/article/details/22892759. 原有项目里自带的启动脚本用到了bash_source获 ...
- SQL Server通过整理索引碎片和重建索引提高速度
本文章转载:http://database.51cto.com/art/201108/282408.htm SQL Server数据库中,当索引碎片太多时,就会拖慢数据库查询的速度.这时我们可以通过整 ...
- 在安装twincat plc时，出现 there are some files marked for deletion on next reboot.please reboot first then
在注冊表内"HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manager\ "中删除注冊表值 " ...