<!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. AndroidStudio3.0的安装和配置笔记

    开发Android项目要搭建开发环境.可以选择使用Eclipse安装ADT插件来开发安卓项目,也可以使用谷歌的官方IDE——AndroidStudio3.0. AndroidStudio3.0安装的具 ...

  2. 《nginx 四》双机主从热备

    lvs+keepalived+nginx实现高性能负载均衡集群 LVS作用 LVS是一个开源的软件,可以实现传输层四层负载均衡.LVS是Linux Virtual Server的缩写,意思是Linux ...

  3. Javascript 学习之数组 Array

    数组在Javascript中占有很重要的地位.任何控件开发离不开数组的使用. 构造函数 new Array( ) new Array(size) new Array(element0, element ...

  4. 简单的JS统计静态网站访问次数

    最简单的静态页面刷新 <html> <head> <meta http-equiv="Content-Type" content="text ...

  5. [Java][Servlet] Cannot call sendRedirect() after the response has been committed

    做一个Login Demo的时候,写了如下代码: protected void doPost(HttpServletRequest request, HttpServletResponse respo ...

  6. ASP.NET MVC 音乐商店 - 3. 视图与模型

    上一篇中使用字符串,这一篇我们就开始使用视图来处理. 我们已经可以从控制器的 Action 中返回一个字符串,这可以帮助我们更好地理解 Controller 是如何工作的.但是对于创建一个 Web 程 ...

  7. MyBatis中sql语句

    一.select <!-- 查询学生,根据id --> <select id="getStudent" parameterType="String&qu ...

  8. Windows服务程序时钟调用

    1       大概思路 设计服务程序 创建服务 安装必备组件 编写Service1 运行效果 2       设计服务程序 创建服务程序,通过添加System.Timers时钟进行定时向Wecome ...

  9. webpack了解

    一.理解webpack 什么是webpack? 是一个模块打包器.它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform).打包 ...

  10. IOS NSThread（线程同步）

    @interface HMViewController () /** 剩余票数 */ @property (nonatomic, assign) int leftTicketsCount; @prop ...