自定义动画

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. Git浅谈随笔之---如何工作

    其他的版本控制工具我们常见的还有SVN,关于这两者的区别,我们不多谈,详见 Git 与 SVN 的区别 : Git是一种版本控制工具.用来记录文件内容的变化,备以后查阅某个版本的情况的系统:我们在Gi ...

  2. 神奇的 SQL 之 WHERE 条件的提取与应用

    开心一刻 小明:为什么中国人结婚非要选一个好日子呢 ? 楼主:嗯 ? 那肯定啊,结完婚之后你还能有好日子吗 ? 小明:那结婚时所说的白头到老是真的吗 ? 楼主:这哪能是真的,你看现在,头发还没白就秃了 ...

  3. Javase-坦克大战小游戏，为什么会出现上方向和左方向的子弹不能发射的情况？检查了好久，有大佬帮帮忙吗，小白睡不着

    //为什么会出现上方向和左方向的子弹不能发射的情况?检查了好久,有大佬帮帮忙吗,小白睡不着 package TanKe.lbl;import java.awt.*;import java.awt.ev ...

  4. delphi制作res文件

    第一步:将brcc32.exe拷贝到某个目录,如“res文件”第二步:制作rc文件1.在“res文件”中新建一个文本文件resources.rc:2.文本文件中每一行写一个资源,资源格式为:资源标识名 ...

  5. implements Serializable有什么作用？

    没有implements Serializable,你就不能通过rmi(包括ejb)提供远程调用.serialization 允许你将实现了Serializable接口的对象转换为字节序列,这些字节序 ...

  6. Linux内存管理解析(三) : 内核对内核空间的内存管理

    内核采用 struct page 来表示一个物理页,在其中记载了诸多物理页的属性,比如 物理页被几个线程使用(如若没有则表示该页可以释放),页对应的虚拟地址. 首先需要知道的是,分配物理页可以分为两个 ...

  7. CDC+ETL实现数据集成方案

    欢迎咨询,合作! weix:wonter 名词解释: CDC又称变更数据捕获(Change Data Capture),开启cdc的源表在插入INSERT.更新UPDATE和删除DELETE活动时会插 ...

  8. 「Flink」Flink的状态管理与容错

    在Flink中的每个函数和运算符都是有状态的.在处理过程中可以用状态来存储数据,这样可以利用状态来构建复杂操作.为了让状态容错,Flink需要设置checkpoint状态.Flink程序是通过chec ...

  9. python——面向对象(1),基础

    """面向对象:抽象化编程思想.类,对象:用类来创建(实例化)对象.类:一系列特征和行为相同的事物总和, 1.属性:特征 2.行为:方法 定义类 :PEP 8要求标识符的 ...

  10. JS中0.1+0.2!=0.3

    在控制台输入0.1+0.2,会得出以下结果 即不等于0.3.下面我们说一下原因. 一.存储原理 1.在计算机中数字无论是定点数还是浮点数都是以多位二进制的方式进行存储的.2.在JS中数字采用的IEEE ...