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. commons-logging,log4j和jdklog的调用方式

    commons-logging包含log4j和jdklog. commons-logging: Log log= LogFactory.getLog(getClass());//commons log ...

  2. Java操作FTP工具类（实例详解）

    这里使用Apache的FTP jar 包 没有使用Java自带的FTPjar包  工具类 package com.zit.ftp; import java.io.File; import java.i ...

  3. oracle数据导入导出数据与编码格式不正确

     1.导入dmp文件 imp ZHCG/ZHCG@ORCL file=E:\20160902.1007.dmp full=y 2.导出数据 exp system/manager@ORCL file ...

  4. 第一章 使用功能测试协助安装Django

    1.1 第一个简单的测试--断言 from selenium import webdriver browser = webdriver.Firefox() browser.get('http://lo ...

  5. ajax返回数据定义为全局变量

    var result;   //定义全局变量    $(document).ready(function(){          $.ajax({                   type:'PO ...

  6. centos7配置mysql

    一:mysql安装方法一:yum安装 下载并安装MySQL官方的 Yum Repository https://dev.mysql.com/ cd ~ wget -i -c https://dev.m ...

  7. 移动端touchmove卡顿

    网上提到的优化技术: 1.window. requestAnimationFrame() a.不用定义时间间隔,避免间隔长:卡顿,间隔短:浏览器漏帧的情况.由浏览器在绘制完一帧后自动再次调用绘制下一帧 ...

  8. React 新 Context API 在前端状态管理的实践

    本文转载至:今日头条技术博客 众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较为繁琐不好管理,通常我们需要使用Redux来帮助我们进行管理,然而随着Re ...

  9. DRF-Rest_Framework 学习文档

    序列化器(serializer) 定义Serializer 1. 定义方法 Django REST framework中的Serializer使用类来定义,须继承自rest_framework.ser ...

  10. python day07作业答案

    1. sum=0 a=input() for i in a: sum=sum+int(i)**3 if sum==int(a): print('水仙数') 2. lst=[100,2,6,9,1,10 ...