<!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. how to use Eclipse with Maven

    install Eclipse LUNA; download and unzip Maven; Eclipse=>window=>preference=>maven=>inst ...

  2. WEB服务器、网站、域名、IP地址、DNS服务器之间的关系

    域名首先指向你的服务器,这个过程叫解析.  服务器分成好多小块,每小块叫一个空间或者一个虚拟主机.  所以当你输入你的域名以后,服务器收到你域名的访问信息,但不知道要打开这么多个小块中的那一个.所以要 ...

  3. python标准输入

    备忘 #! /usr/bin/python2.6 import sys for line in sys.stdin: print line,

  4. CentOS7安装MongoDB3.6企业版

    参考资源 https://docs.mongodb.com/manual/tutorial/install-mongodb-enterprise-on-red-hat/   下载安装 配置yum仓库 ...

  5. mysql-查询的案例

    查询每个专业的男生人数和女生人数分别是多少 #方式一: select count(*) 个数,sex,majorid from student group by sex,majorid; #方式二: ...

  6. svg的基本图形与属性【小尾巴的svg学习笔记1】

    因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删. 一.基本图形 1.矩形 x,y定义矩形的左上角坐标: width,height定义矩形的长度和宽度: rx,ry定义矩形的圆角半径 ...

  7. iis 部署网站常见问题

    环境IIS6.0,win2003server 首先打开iis,左边菜单选中”Web服务扩展“,讲Active Server Pages 和 ASP.NET v2.0.50727设置为允许 1.创建网站 ...

  8. 【MATLAB】画信号频谱的子函数

    输入信号序列和采样率,该子函数可以画出该信号的频谱图. function [f,spec,NFFT]=spec_fft_plot(sample,L,Fs) % 输入数据说明: % sample:信号序 ...

  9. Struts2_默认Action

    配置Struts2默认跳转的Action <package name="default" namespace="/" extends="stru ...

  10. SPICE简史

    如今每一天都有不知其数的半导体芯片设计公司与设计验证工程师,在用着电路仿真软件SPICE.SPICE广泛应用在仿真模拟电路(例如运放Op Amp,能隙基准稳压电源Bandgap Reference,数 ...