所谓综合动画，就是在链式表达式依次执行相关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中的综合动画的更多相关文章

  1. jQuery中的经典动画

    show()方法和hide()方法是jQuery中的基本动画方法,hide()方法等于将css()方法设置display属性为none.如何让元素动起来呢,我们可以在show和hide里加入slow, ...

  2. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  3. bootstrap课程7 jquery中结束之前动画用什么

    bootstrap课程7 jquery中结束之前动画用什么 一.总结 一句话总结:stop()方法.$('.navs').not($('.navs').eq(idx)).stop().hide(100 ...

  4. jQuery中事件与动画

    jQuery中的事件与动画   一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...

  5. jquery中stop停止动画笔记

    jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法: $(selector).stop( ...

  6. jQuery中事件与动画的总结

       1.加载DOM     1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行   $(function(){}) ……:只是 ...

  7. jQuery 中的简单动画

    制作动画常用方法: show("速度")   显示元素   hide("速度")   隐藏元素   toggle()       切换效果 例如下jQuery代 ...

  8. jquery 中fadeIn,fadeOut动画

    我们在做首页banner图片播放的时候会使用fadeIn,fadeOut动画,这里需要注意的是: fadeIn作用相当于:display:list-item;opcity逐渐变为1 fadeOut作用 ...

  9. jQuery中自定义简单动画的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. 【转】中兴G718C卡刷刷机教程(青漾2 4G)--不错

    原文网址:http://www.zterom.com/guide/2278.html 刷机包 B11纯净版 适合长久使用_B11_lite_0130.zip 刷机用了20多分钟. 在和大家分享过中兴G ...

  2. HDOJ 2015 偶数求和

    Problem Description 有一个长度为n(n<=100)的数列,该数列定义为从2开始的递增有序偶数,现在要求你按照顺序每m个数求出一个平均值,如果最后不足m个,则以实际数量求平均值 ...

  3. JavaScript中的运动数学函数（持续更新）

    经常需要实现JS的动画效果,就会用到如下的一些数学的东西. 二次方运动,从0开始加速: var f=function(t,orgvalue,changevalue,runtime){ var t=t/ ...

  4. 域名解析中A记录、CNAME、MX记录、NS记录的区别和联系

    可以看出加了www.和不加www之后的区别. 可以看出域名解析中有几种记录,A记录,CNAME CNAME记录是域名指向另一个域名A记录是域名指向IP地址 A记录 又称IP指向,用户可以在此设置子域名 ...

  5. oracle参数优化

    关闭OEM,使用oracle用户登录,执行命令: emctl status dbconsole emctl stop dbconsole 以下命令推荐用sys用户登录PLSQL Developer,使 ...

  6. Linux 调度器模拟

    http://www.ibm.com/developerworks/cn/linux/l-linux-scheduler-simulator/ LinSched LinSched 是驻留在用户空间中的 ...

  7. [c#]如何在form的webbrowser控件中获得鼠标坐标

    如图这样,其实是要插入一个time的控件,这样才能使得坐标值会根据鼠标的移动而不停变化.time插件中写private void timer1_Tick(object sender, EventArg ...

  8. Android内存等信息

    1. Linux中proc目录下文件详解 http://wenku.baidu.com/view/2ce89f00a6c30c2259019ef1.html 2. Android系统/proc目录详解 ...

  9. 模板-->常系数线性齐次递推(矩阵快速幂)

    如果有相应的OJ题目,欢迎同学们提供相应的链接 相关链接 所有模板的快速链接 Matrix模板 poj_2118_Firepersons,my_ac_code 简单的测试 None 代码模板 /* * ...

  10. Day9 - Python 多线程、进程

    Python之路,Day9, 进程.线程.协程篇   本节内容 操作系统发展史介绍 进程.与线程区别 python GIL全局解释器锁 线程 语法 join 线程锁之Lock\Rlock\信号量 将线 ...