自定义动画

animate();

第一个参数：{对象}，里面可以传需要动画的样式

第二个参数：speed 动画的执行时间

第三个参数：easing 动画的执行效果

第四个参数：callback 回调函数

 

        //第一个参数：对象，里面可以传需要动画的样式

        $("#box1").animate({ left: 800, height: 200 });
        //第二个参数：speed 动画的执行时间

        $("#box1").animate({ left: 800 }, 4000);
        //第三个参数：动画的执行效果

        // //swing:秋千 摇摆

        $("#box2").animate({ left: 800 }, 8000, "swing");

        // //linear:线性 匀速

        $("#box3").animate({ left: 800 }, 8000, "linear");
        //第四个参数：回调函数

        $("#box3").animate({ left: 800 }, 8000, "linear", function () {

          console.log("动画执行完毕");

        });

合体

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 100px;

      height: 100px;

      background-color: pink;

      position: absolute;

    }

    #box2 {

      background-color: blue;

      margin-top: 150px;

    }

    #box3 {

      background-color: yellowgreen;

      margin-top: 300px;

    }

  </style>

</head>

<body>

  <input type="button" value="开始">

  <input type="button" value="结束">

  <div id="box1"></div>

  <div id="box2"></div>

  <div id="box3"></div>

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

  <script>

    $(function () {

      $("input").eq(0).click(function () {

        //第一个参数：对象，里面可以传需要动画的样式

        //第二个参数：speed 动画的执行时间

        //第三个参数：动画的执行效果

        //第四个参数：回调函数

        //swing:秋千 摇摆

        $("#box1").animate({ left: 800, height: 200 });

        $("#box1").animate({ left: 800 }, 4000);

        $("#box2").animate({ left: 800 }, 4000, "swing");

        $("#box3").animate({ left: 800 }, 4000, "linear", function () {

          console.log("动画执行完毕");

        });

      })

    });

  </script>

</body>

</html>

jQuery---自定义动画 animate();的更多相关文章

  1. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

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

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

  3. 自定义动画animate()

    在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp( ...

  4. Jquery 自定义动画同步进行如何实现？

    需求描述:我需要对不懂的两个HTML对象进行操作,同时开始动画,同时结束动画. 遇到问题:如果先后对连个对象进行 animate动画,那么第一个会先运行,等第一个运行完了运行第二个,这样就不同步了. ...

  5. 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  6. jQuery 效果 - 动画 animate() 方法

    我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...

  7. jQuery 自定义动画效果

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

  8. Jquery自定义动画与动画队列

    animate:自定义动画 $(selector).animate({params},[speed],[easing],[callback]); params:要执行动画的css属性,它是一个对象可以 ...

  9. jQuery——自定义动画

    动画方法:animate(json,1000, function (){}) 参数说明:json代表属性设置,1000是动画时间,最后一个是回调函数,其中动画时间可选 属性支持:http://www. ...

  10. jQuery自定义动画

    $(function(){ $(".btn1").click(function(){ $(','opacity':'toggle'}); }); $(".btn2&quo ...

随机推荐

  1. Fastdfs php扩展访问

    一.安装FastDFS client php extension compiled under PHP 5.4 and PHP 7.0   1.安装php扩展,进入fastdfs源码文件夹中的  ph ...

  2. Nginx location配置 正则表达式

    一. location 的匹配符 Syntax: location [ = | ~ | ~* | ^~ ] uri { ... }location @name { ... }     1.  语法格式 ...

  3. HttpMessageNotReadableException

    HttpMessageNotReadableException 情况描述: spring boot web项目,尝试使用热部署工具. Controller只写了用来测试异常的方法, 异常处理器去捕获异 ...

  4. java设计模式 - 单例模式（干货）

    深度讲解23种设计模式,力争每种设计模式都刨析到底.废话不多说,开始第一种设计模式 - 单例. 作者已知的单例模式有8种写法,而每一种写法,都有自身的优缺点. 1,使用频率最高的写法,废话不多说,直接 ...

  5. 1.3.5 详解项目中的资源——Android第一行代码（第二版）笔记

    所有以drawable开头的文件夹都是用来存放图片的. 所有以mipmap开头的文件夹都是用来存放应用图标的 所有以values开头的文件夹都是用来存放字符串.样式.颜色等配置的, layout文件夹 ...

  6. fish 设置环境变量；fish shell 相关使用说明记录；

    最近使用 fish进行工作,发现环境变量忘记如何设置: fish 环境变量保存在两个地方: ~ 目录下,.config/fish 目录下: /etc/fish/ 目录下 如果配置所有用户都能用的环境变 ...

  7. 【pattern】设计模式（3） - Observer观察者模式

    源码地址:https://github.com/vergilyn/design-patterns 另外一个大神很全的Github:https://github.com/iluwatar/java-de ...

  8. BizCharts使用采坑教程

      了不起的BizCharts 最近项目的管理后台都在用阿里粑粑开源的管理框架Ant Design Pro,说真话,还是比较好用的.该框架内部也封装了一些图标插件,但是在最近的一个项目中发现,这些图标 ...

  9. css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

    后代选择器 祖先元素 后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器 元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器 元素~兄弟元素(该 ...

  10. #AcWing系列课程Level-2笔记——1. 快速排序算法

    快速排序算法(冒泡排序算法的升级版) 编写快速排序,记住下面的思路,代码也就游刃有余了! 1.首先确定分界点:分界点设为x,可以取q[left],q[(left+right)>>2],q[ ...