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. laravel composer 安装指定版本以及基本的配置

    1 安装指定的 laravel版本 以下的案例是安装5.2版本 composer create-project laravel/laravel=5.2.* --prefer-dist 2 配置 优化相 ...

  2. 每天CSS学习之border-collapse

    border-collapse是CSS2的一个属性,其作用是折叠表格(table)的边框.collapse翻译过来又折叠的意思. border-collapse有三个值: collapse:将表格和单 ...

  3. 1014 2018 使用FLAG counter

    AmazingCounters.com 不能用了,服务器访问不了了,之前的博客浏览量也看不到了,1014号换了个新的--FLAG counter,就是博客右边那个.

  4. Linux 最小安装常用包

    Linux最小安装后很多常用的工具都没有,但直接通过yum install 文件名的方式可能无法找到,汇总于此,随时更新: CentOS7 1.如果要通过SecureCRT上直接上传下载文件,最简单的 ...

  5. 干货分享！DevExpress v17.1最新版帮助文档下载大全

    DevExpress v17.1.5帮助文档下载列表大全来啦!包含.NET.VCL.HTML/JS系列所有帮助文档,提供CHM和PDF两个版本.除已停止更新的Silverlight.Windows 8 ...

  6. mybatis column 和property

    mybatis map文件中 resultMap中column和sql查询结果对应, property和实体private对应 <resultMap id="VideoYcAppRes ...

  7. SpringMVC配置及使用

    SpringMVC基本配置 SpringMVC是基本请求响应模式的框架. 在项目中集成SpringMVC框架首先需要导入相关的jar包,所需包具体如下: commons-dbcp.jar common ...

  8. java websocket学习

    引言: websocket,webservice傻傻分不清楚,都觉得是很高深的东西,理解中的webservice是一种协议,通信协议,类似http协议的那种,比如使用webservice协议调后台接口 ...

  9. tensorflow-LSTM-网络输出与多隐层节点

    本文从tensorflow的代码层面理解LSTM. 看本文之前,需要先看我的这两篇博客 https://www.cnblogs.com/yanshw/p/10495745.html 谈到网络结构 ht ...

  10. L300 3月英语课下

    重音 句中的实词(内容词)要被重读,读得重.长一点.句中的虚词(功能词)要被轻读或弱读,读得轻.短一点口语交流中,当虚词的在句中起到重要的表意作用时,会被重读. 连读 连读:把一个单词的尾音同下一个单 ...