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. zabbix3.4.7表结构

    zabbix数据库表结构的重要性 想理解zabbix的前端代码.做深入的二次开发,甚至的调优,那就不能不了解数据库的表结构了. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  2. 关于Object.prototype.toString.call

    slice(8,-1)意思是从第8位开始(包含第8位)到最后一位之前(-1的意思就是最后一位,不包含最后一位): Object.prototype.toString.call(boj)这个是用来判断数 ...

  3. day04控制流程之if判断

    一.控制流程之if判断 1.什么是if判断 判断一个条件如果成立则...不成立则... 2.为何要有if判断 让计算机能够像人一样具有判断能力 3.如何用if判断 ''' # 语法1: ''' if ...

  4. U深度U盘安装win7系统教程

    ① 使用u深度u盘启动盘制作工具制作好的启动u盘 点击查看 ==>u深度u盘启动盘制作教程 ② ghost win7系统镜像文件(自可上网自行搜索ghost xp系统) 第一步:下载win7系统 ...

  5. flask上传下载文件（一）下载

    简介: 作为一个可以和用户交互的web应用,必然要有数据导出功能,导出到excel是比较常用的方式. flask有一个扩展叫flask-excel,可能不适合中国人用,因为没有看到修改列名的功能.也许 ...

  6. RabbitMQ fanout类型的Exchange

    就目前来说,Exchange是与消息发送端有关的,因为它可以指定将消息发送到哪个或哪些队列中. 本篇文章介绍的fanout类型就是指定将消息群发到与Exchange绑定的所有队列中. fanout这个 ...

  7. 二叉排序树，Binary_Sort_Tree，C++完整实现

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  8. CString、string、const char*的相互转换

    环境:vs2010 1.CString转string //第一种方式: CString str = _T("CSDN"); USES_CONVERSION; std::string ...

  9. minidebug学习分析 01 基本框架

    0x01  基本框架  基本框架就是CreateProcess启动目标程序,再通过调试事件DEBUG_EVENT在调试循环中监控程序的行为.  (1)CreatProcess BOOL CreateP ...

  10. calc（）

    width:calc(): cale(a)计算出表达式a的值. e.g: height:cale(100vh-200px):vh,是指CSS中相对长度单位,表示相对视口高度,通常视口长度单位会被分成1 ...