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 ...
随机推荐
- Light OJ 1013 Love Calculator(DP)
题目大意: 给你两个字符串A,B 要求一个最短的字符串C,使得A,B同时为C的子串. 问C最短长度是多少? C有多少种? 题目分析: 做这道题目的时候自己并没有推出来,看了网上的题解. 1.dp[C串 ...
- win7使用USB转串口连接mini2440方法
不想嚼别人吃剩的馍.我只说我自己是怎么痛苦的连上的. 环境设备: window7笔记本,没有串口,装有XP和Ubuntu2个虚拟机(不是必须的,我只是说明一下我的环境) 友善之臂mini2440(含U ...
- Windows下动态库的隐式调用
多年的工作经验告诉我Windows下使用动态库最简单的方法:使用def导出函数,然后隐式调用. 具体做法如下: (1)首先使用visual studio 创建“Win32项目”,如下图: (2)然后在 ...
- Linux下设置允许myql数据库远程连接
系统环境: Linux ubuntu --generic #-Ubuntu SMP Thu Apr :: UTC x86_64 x86_64 x86_64 GNU/Linux 系统中已经安装好mysq ...
- WdatePicker 控制选择范围
1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架 ...
- selenium webdriver启动Chrome浏览器后无法输入网址的解决办法
通过selenium webdriver启动Chrome浏览器,脚本如下: from selenium import webdriver browser = webdriver.Chrome() br ...
- floyd+动态规划 hdu-4571-Travel in time
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4571 题目大意: 有n个景点,每个点都有个游玩时间ci,游玩后得到的满意度si.给一个起点s和终点e ...
- Android - 软件自动更新的实现(转)
在客户端实现更新操作 涉及到三个技术: 1.xml文件的解析 2.HttpURLConnection连接 3.文件流I/O 这里创建一个解析xml文件的服务类:ParXmlService.java p ...
- Java基础知识强化之集合框架笔记06：Collection集合存储自定义对象并遍历的案例
1.练习:用集合存储5个学生对象,并把学生对象进行遍历. 分析: (1)创建学生类(2)创建集合对象(3)创建学生对象(4)把学生添加到集合(5)把集合转成数组(6)遍历数组 2. 代码示例: Stu ...
- CentOS下FTP服务器安装与配置
安装vsftpd yum install vsftpd 启动/重启/关闭vsftpd服务器 CentOS7 以下: 启动: service vsftpd start 停止: service vsftp ...