jq动画的优点

优点：

1、可以知道动画结束的表示（结束的回调函数）

2、可以利用jq动画插件完成复杂的动画

动画有三个参数：动画的样式是字典、动画持续的事件，动画结束回调函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jq动画</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script src="js/jq.js"></script>
<script>
    //鼠标点击切换回圆，鼠标离开恢复，通过两个事件来完成
    //动画有三个参数：动画的样式是字典、动画持续的事件，动画结束回调函数
    $('.box').click(function () {
        //点击变成圆
        $(this).animate({
            borderRadius:'50%'  //这里还可以安装jq的插件，就是直接调用jq的插件，也可以自定意义插件
        },100,function () {
            console.log('我是动画结束的标识')
        })  //1秒就是1000
    });
    $('.box').mouseout(function () {
        //鼠标移走恢复原样
        $(this).animate({
            borderRadius:'0'
        },100,function () {
            console.log('我是动画恢复的标识')
        })  //1秒就是1000
    })

</script>
</html>

（21）jq动画的更多相关文章

  1. css动画和jq动画的简单区分

    有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效 ...

  2. jq动画设置图片抽奖(修改效果版)

    效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...

  3. 自写Jq动画载入插件

    在写网站的时候,有一些dom第一次进入屏幕时需要加一个动画进入效果,如下图 于是,自己就研究下,要是实现gif图中左图效果大致原理就是首先将dom放在他的左侧,并将他的透明度(opacity)设置为0 ...

  4. jq动画插件，自制基于vue的圆形时钟

    首先附上jq插件库,里面的东西太炫了,建议学前端的可以看看学习下:http://www.jq22.com/ 里面有个“超个性动画版本的个人简历”,通过屏幕上不断打印内容,改变相应样式来实现动画简历,我 ...

  5. jq动画和停止动画

    使用jq 实现动画循环效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. JQ动画的简单介绍

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  7. JQ动画事件

    1.会飞的li html: <ul id="ulL"> <li>中国</li> <li>美国</li> <li&g ...

  8. jq动画实现左右滑动

    <!DOCTYPE html> <html> <head> <title>jquery动画滑动</title> <style type ...

  9. jq动画设置图片抽奖

    (因为自己是前端刚入门的小白所以中间出现很多问题,不过这对于我来说就是一次经验的积累) 预想效果:点击"开始",图片循环旋转,不是同时的效果,而是有一定的时间差.点击"开 ...

随机推荐

  1. Django+Xadmin+Echarts动态获取数据legend颜色显示灰色问题已解决

    前段时间做的使用Django的Xadmin后台和百度Echarts进行后台数据可视化,功能虽然实现,展示出来的legend图例,都是灰色的,只有鼠标放上去才会显示彩色的.百度都快被我刨穿了,看到有类似 ...

  2. 对象关系_many2many

    jdbc: package demo.test.many2many; import java.util.HashSet; import java.util.Set; public class Stud ...

  3. [POJ2761]Feed the dogs

    Problem 查询区间第k大,但保证区间不互相包含(可以相交) Solution 只需要对每个区间左端点进行排序,那它们的右端点必定单调递增,不然会出现区间包含的情况. 所以我们暴力对下一个区间加上 ...

  4. tidb使用坑记录

    转载自:https://www.cnblogs.com/linn/p/8459327.html tidb使用坑记录 1.对硬盘要求很高,没上SSD硬盘的不建议使用 2.不支持分区,删除数据是个大坑. ...

  5. Linux查看某个进程的磁盘IO读写情况 pidstat

    一.现象 1)钉钉告警不断,告警如下CPU使用达到100% 普罗米修斯监控 2)查看数据库,没有发现比平时同一时段,业务量的增加.但是,数据库显示latch free等告警,验证了CPU使用过高导致. ...

  6. C++ Templates 关于程序库的概念和通用工具

    using namespace std所谓的命名空间,就是一种将程序库名称封装起来的方法,它就像在程序库中竖立了一道围墙 标准程序库中有一部分,比如string classes,支持具体的错误处理,它 ...

  7. java编写本月日历

    代码如下: import java.time.*; public class Main { public static void main(String arg[]){ LocalDate date ...

  8. 数学软件Matlab的使用感受

    在我一年前的暑假,我们的小学期学习了MATLAB软件.MATLAB是一款数学软件,可以用于算法计算.数据可视化.数据分析以及数据计算. 我们主要学习了MATLAB关于数学上的经常用的一些用法和算法,M ...

  9. bootstrap 下拉选中查询

    <div class="form-group"> <label class="col-lg-3 col-sm-2 control-label" ...

  10. DevExpress WPF v18.2新版亮点（七）

    行业领先的.NET界面控件2018年第二次重大更新——DevExpress v18.2日前正式发布,本站将以连载的形式为大家介绍新版本新功能.本文将介绍了DevExpress WPF v18.2的新功 ...