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 ...
随机推荐
- Android Weekly Notes Issue #239
Android Weekly Issue #239 January 8th, 2017 Android Weekly Issue #239 本期内容包括: Android Things开发; Andr ...
- Fill-倒水问题(Uva-10603-隐式图路径寻找问题)
原题:https://uva.onlinejudge.org/external/106/10603.pdf 有三个没有刻度的杯子,它们的容量分别是a, b, c, 最初只有c中的杯子装满水,其他的被子 ...
- kickstrt脚本for cobbler基于system-config-kickstart配置
1,由于是基于图形界面来生成ks自动安装脚本,所有图形生成ks脚本的服务器首先需要的就是有X Window System; 要是虚机的可以配个tigervnc-servere来进行操作 不说了直接上命 ...
- Servlet工作原理
Servlet生命周期分为三个阶段: 1,初始化阶段 调用init()方法 2,响应客户请求阶段 调用service()方法 3,终止阶段 调用destroy()方法 Servlet初始化阶段: 在 ...
- ss sp行情
SS Securities Standard SP Securities Premium 優行情質 Securities Standard (SS), Premium (SP), FullTick S ...
- 当在类中的 Parcelable 接口使用 ArrayList < customObject > android 系统： nullPointerException
我想使调用音乐使用 parcelable,所以我可以访问两个不同的活动中的音乐的实例的类.我不想使用可序列化的速度的目的.当我尝试将它使用传递时,我总是收到 nullPointerException: ...
- 【转】Android TextView SpannableStringBuilder 图文混排颜色斜体粗体下划线删除线
spannableStringBuilder 用法详解: SpannableString ss = new SpannableString("红色打电话斜体删除线绿色下划线图片:." ...
- android ContentProvider学习
1.ContentProvider提供位存储或获取数据提供了统一的接口. 2.使用ContentProvider可以在不同的应用程序之间共享数据. 3.Android为常见的一些数据提供了Conten ...
- 关于Xcode的Other Linker Flags
背景 在ios开发过程中,有时候会用到第三方的静态库(.a文件),然后导入后发现编译正常但运行时会出现selector not recognized的错误,从而导致app闪退.接着仔细阅读库文件的说明 ...
- php include 与 require 起底[转]
转自 http://www.guangla.com/post/2014-01-24/40060857811 起因: 一朋友面试被问到,php的include和require的区别,这个可能是面试中出现 ...