<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    div{

        width: 100px;

        height: 100px;

        background: green;

    }

    </style>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

    $(function(){

        // $('div').animate(字典的形式写动画过程, 动画所需时间, 运动曲线, 回调函数)

        // 1、动画过程：{} -- css多属性写法相同

        // 2、时间以毫秒为单位,  600

        // 3、运动曲线：swing  linear

        // 4、回调函数：就是匿名函数function(){} -- 作用：当动画完成之后执行的命令

        $('div').eq(0).animate({'width':'800px', 'height':'300px','background':'red'}, 1000, 'swing', function(){

            alert('动画完成了')

        })

        // $('div').eq(1).animate({'width':'800px'}, 1000, 'linear')

        // ****animate不支持变色动画

    })

    </script>

</head>

<body>

    <div></div>

    <!-- <div></div> -->

</body>

</html>

　　

自定义动画函数JQuery实现的更多相关文章

  1. javascript 自定义动画函数

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

  2. python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  3. jQuary总结8:动画操作-自定义动画

    1 自定义动画 语法: jQuery对象.animate(json,[speed],[easing],[callback]) 参数详解: -1 json:要执行动画的CSS属性,带数字(必选) -2  ...

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

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

  5. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

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

  6. jquery的动画函数animate()讲解一

    jquery animate 动画效果使用说明 animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指 ...

  7. jquery接触初级-----juqery 动画函数

    1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...

  8. jQuery 自定义动画效果

    <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...

  9. jQuery中关于如何使用animate自定义动画

    动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一 ...

随机推荐

  1. WPF 正確理解ContentPresenter

    我們先由下圖來看類層次,可知ContentControl繼承Control,ContentPresenter繼承FrameworkElement(Control也繼承FrameworkElement) ...

  2. 支付宝php支付接口说明

    直接把该代码放到PHP服务器下,直接访问index.php.1.文件列表: alipay_config.php    (基本参数配置页面,填写商家的支付宝安全校验码,合作id,支付宝帐号等内容)ind ...

  3. HDU 4512——吉哥系列故事——完美队形I——————【LCIS应用】

    吉哥系列故事——完美队形I Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tot ...

  4. 祝高二学弟学妹AK NOIp2018!!!!!!

         

  5. IIS设置问题

    1.解决IIS7.5中部署WCF时,访问.svc文件的404错误问题  如果你直接在IIS 7中配置WCF,访问.svc文件时会出现404错误.解决方法,以管理员身份进入命令行模式,运行:" ...

  6. autofac学习

    Instance Scope 1.instance per dependency    (the default) builder.RegisterType<classes>();等价于 ...

  7. Wallet address

    BCX XZVYYwXFAJwv6x4KTssQxJb4EReVdCBnpb BCD 1DNSFUD7LURZdmbckkQcxMvinNJ26mVcNH

  8. 栅格那点儿事（四A）---栅格的显示与渲染

    栅格的显示与渲染 通过前两章的学习,应该对栅格这个东西不那么陌生了.在这一个部分,我们来看看如何展示出栅格数据最美丽的地方,在ArcGIS中栅格的显示与渲染.在进入细节之前,先来看看在ArcGIS中都 ...

  9. 轻松完成excel读写操作- 基于POI的框架BingExcel的使用(1)

    Bingexcel User Guide 使用maven进行项目开发目前项目的maven仓库是在github上,浏览地址为 https://github.com/bingyulei007/mvn-re ...

  10. FRM-40654 Record has been updated

    该错误是由于界面上对数据进行了修改后(比如为A),将修改前的数据(B)与数据库中的数据(B)进行配不成功时报错: 首先确认Form界面是否有其他人对数据进行修改: 如果无人修改: 将数据库的数据查询出 ...