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 ...
随机推荐
- 图论（生成树）：HDU 5631Rikka with Graph
Rikka with Graph Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
- ActionFilterAttribute OnActionExecuting 获取参数
public class AuthFilterAttribute : ActionFilterAttribute { /// <summary> /// Action执行前处理 /// & ...
- POJ 3050 穷举
题意:给定一个5*5的地图,每个格子上有一个数字.从一个格子出发(上下左右4个方向),走5步将数字连起来可以构造出一个6位数.问该地图可以构造出多少个不同的6位数. 分析:可以对每个格子做深度优先遍历 ...
- Apache-Tika解析JPEG文档
通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理JPEG格式的图片,如下: package com.mengyao.tika.app; i ...
- 实现一个servlet的helloworld小程序（不适用Eclipse）
实现一个servlet的helloworld小程序(不适用Eclipse) 1. 在tomcat中的webapps下建一个应用程序FirstServlet(C:\tomcat\webapps\Firs ...
- greenplum和postgresql
想着要不要写,两个原因"懒"和"空".其实懒和空也是有联系的,不是因为懒的写,而是因为对PostgreSQL和Npgsql的知识了解匮乏,也就懒得写.好了,开头 ...
- 69个spring面试题及答案
Spring 概述 1. 什么是spring? Spring 是个Java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring ...
- 【bzoj2434】[Noi2011]阿狸的打字机
题目描述 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母.经阿狸研究发现,这个打字机是这样工作的:l 输入小写字 ...
- Java 实现字符串反转
方法一: public class StringReverse { public void swap(char[] arr, int begin, int end) { while(begin < ...
- Shiro Quartz之Junit測试Session管理
Shiro的quartz主要API上提供了org.apache.shiro.session.mgt.quartz下session管理的两个类:QuartzSessionValidationJob和Qu ...