<!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. ubuntu install fonts

    sudo apt-get install ttf-wqy-zenhei

  2. input type="image" 提交表单

    提到<input type="image"  />,说起来有些惭愧.之前的工作基本每周都要制作两到三个注册用户的网页.其中就用它提交表单. 那个时候我想当然的以为这是用 ...

  3. 第三方缓存软件memcached和redis异同

    memcached和redis相同点:都是以键值对的形式来存储数据,通俗讲就是一个大的hashtable缓存数据都是存在内容中 key-value 不同点:memcached:1.一个key所对应的值 ...

  4. jQuery中的节点操作(二)

    html代码如下 <p title="武汉长乐教育PHP系列教程" name="hello" class="blue"> < ...

  5. Django Rest Framework框架源码流程

    在详细说django-rest-framework源码流程之前,先要知道什么是RESTFUL.REST API . RESTFUL是所有Web应用都应该遵守的架构设计指导原则. REST是Repres ...

  6. js随堂初体验（一）

    Js初体验(-) 1 js的基础知识 A web三大标准:1 html:结构标准    2 css:表现标准  3 javascript:行为标准 B js三种书写方式:1 行内js:onclick ...

  7. 让DIV的滚动条自动滚动到最底部

    一个在线聊天窗口,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 我得出的结论是:在选中div时,必须用原生js,jQuery不起作用 <!DOCTYPE> < ...

  8. TX Text Control X10新特性之图像占位符合并

    文档处理控件TX Text Control即将发布的X10版本,将升级重点还是放到了其比较优势的流式布局报表设计和生成上.慧都获得了来自其开发商Text Control GmbH公司的一手资料,迫不及 ...

  9. Oracle11g 卸载教程图解

    1:停掉所有Oracle相关的服务 1.1打开服务方式如下: 1.1.1:右击“计算机”–>管理–>服务和应用程序–>服务 1.1.2:开始–>输入“服务”后点击搜索–> ...

  10. April 30 2017 Week 18 Sunday

    Our lives stretched out ahead of us, like a perpetual sunrise. 生命如永恒的日出,生生不息. Please respect yoursel ...