<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        /*****

        animate(params,speed,callback);

        (1),params:一个包含样式属性及值的映射比如{propertyp1:"value1",propertyp1:"value2"}

        (2).speed,速度参数，可选

        (3),callback,在动画完成时执行的函数，可选

        *****/

        /*1、

        $(function() {

        $("#panel").click(function() {

        $(this).animate({left:"500px"},3000);

        });

        });

        */

        // 2、 累加 ，累减

        /*

        $(function() {

        $("#panel").click(function() {

        $(this).animate({ left: "+=500px" }, 3000);//在当前位置累加到500px

        });

        });

        */

        // 3、多重动画

        /*

        $(function() {

        $("#panel").click(function() {

        $(this).animate({ left: "+=500px",height:"200px"}, 3000); //向右滑动时放大元素的高度

        }); //或： $(this).animate({ left: "+=500px"}, 3000);

        $(this).animate({ height:"200px"}, 3000);

        });

        */

        /*

        //4、综合动画

        $(function() {

        $("#panel").css("opacity", "0.5"); //设置不透明度

        $("#panel").click(function() {

        $(this).animate({ left: "+=500px", height: "200px", opacity: "1" }, 3000).animate({top:"200px",width:"200px"},300).fadeOut ("slow");

        });

        });

        */

        //5、动画回调函数 ,想要在最后改变样式把fadeout（），改为css（）；并不能得到预期的效果而应该把css放到回调函数中

        $(function () {

            $("#panel").css("opacity", "0.5"); //设置不透明度

            $("#panel").click(function () {

                $(this).animate({ left: "+=500px", height: "200px", opacity: "" }, ).animate({ top: "200px", width: "200px" }, , function () {

                    $(this).css("border", "5px solid blue");

                })

            });

        }); 

    </script>

    <style type="text/css">

        #panel

        {

            position: relative;

            width: 100px;

            height: 100px;

            border: 1px solid #0050D0;

            background: #96E555;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div id="panel">

    </div>

</body>

</html>

Jq自定义动画的更多相关文章

  1. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  2. javascript 自定义动画函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画

    /** * [JQ基础动画] * show() 显示 * hide() 隐藏 * toggle() 切换 * 默认无动画,如果要产生动画 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 * * ...

  4. android 自定义动画

    android自定义动画注意是继承Animation,重写里面的initialize和applyTransformation,在initialize方法做一些初始化的工作,在applyTransfor ...

  5. Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析

    这是关于RecyclerView的第二篇,说的是如何自定义Item动画,但是请注意,本文不包含动画的具体实现方法,只是告诉大家如何去自定义动画,如何去参考源代码. 我们知道,RecyclerView默 ...

  6. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  7. 自定义动画css属性

    自定义动画: 1.animation-name(自定义动画名称) 元素所应用的动画名称,必须与@keyframes使用,名称由@keyframes定义. keyframes(动画关键帧):以@keyf ...

  8. [UE4]CustomAnimationBlueprintNode 自定义动画蓝图节点

    目的:在AnimationBlueprint中使用自定义动画控制节点. 主要过程: 1.      引用相关模块.在Client.Build.cs文件中,PublicDependencyModuleN ...

  9. CSS3初学篇章_6(自定义动画)

    自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下: 前缀 浏览器  -webkit  chrome和safari  -moz  firefox  - ...

随机推荐

  1. DOM生成&解析

    开篇注意,由于解析有可能有大文件非常耗时,建议另开一个线程解析也可以不开具体视情况而定     DOM生成 1.拿到Document的工厂实例化 DocumentBuilderFactory df = ...

  2. Android中获取apk基本信息

    一 PackageManager可以获得的所有包节点信息: 1,所有节点的基类:PackageItemInfo: 2,PackageInfo:package的全面信息,与AndroidManifest ...

  3. PHP学习笔记二十【静态方法】

    <?php //静态变量的基本用法 //1,在类中定义变量 //2.定义方式[访问修饰符]static 变量名 //3.访问方式self::$变量名 第二种方式,类名::$变量名 //4.在类外 ...

  4. JAVA加密

    [源地址http://www.iteye.com/topic/1122076/] 加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信 ...

  5. iOS 开发者证书总结

    iOS 证书分两种类型. 第一种为$99美元的,这种账号有个人和公司的区别,公司账号能创建多个子账号,但个人的不能.这种账号可以用来上传app store 第二种为￥299美元的,这种账号只能用于企业 ...

  6. iOS 证书错误 Certificates下面的 App Store and Ad Hoc是灰的？？ 点不了

    原因 因为一个用户名下只能同时有一个发布证书,你之前建立了某个证书并且没有使用的话就无法再创建了,先把它撤销或者使用后才可以继续创建新的

  7. C++语法报错收集

    1. error C2864: "OuterClass::m_outerInt": 只有静态常量整型数据成员才可以在类中初始化 class OuterClass { public: ...

  8. HibernateTemplate类的方法flush()

    hibernate的实体都是存储在缓存中的,所以你会发现有的时候当你创建出两个主键相通的实体的时候会报错.正常情况是当你调用save方法的时候,这个实体对象未必已经保存到数据库了,调用close方法的 ...

  9. 自定义view组件

    参考<疯狂android讲义>第2版 2.1节P48,对应CustomViewDemo.zip. 若在开发过程中,发现现有的view均不能满足需要,可以自定义一个view. 自定义一个vi ...

  10. Jquery表单与表格的运用

    1,表单的应用: a. 单行文本框的应用  多行文本框的应用 b.复选框的框的应用 c.下拉框的应用 d.表单验证 2,表格的应用: a. 表格变色 b.表格展开关闭 d.表格内容筛选 3,多行文本框 ...