<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
  .circle{
  width:280px;
  height:180px;
  background:radial-gradient(closest-side,red 1%,yellow 10%,#00ffff 50%);
  border-radius:50%;
  position:absolute;
  top:200px; 
} 
</style>
</head>
<body>
<div id="circle" class="circle" onmouseover="b()" onmouseout="d()"></div>
<input type="button" value="start" onclick="ae()"/>
<div id="seconds" class="second"></div>
<script type="text/javascript">
var e
function b(){$(".circle").animate({width:"-=10px", height:"+=10px",top:"-=15px",right:"-=15",opacity:"1"},3000);            
           }
function ae(){e=setInterval(b,1000)}
var w=$(".circle").width()
var h=$(".circle").height()
if(r==l){clearInterval(e)}
</script>
</body>
</html>

jquery循环动画的更多相关文章

  1. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  2. 第73天：jQuery基本动画总结

    一.DOM对象跟jQuery对象相互转换 jQuery对象转换成DOM对象: 方式一:$(“#btn”)[0] 方式二:$(“#btn”).get(0) DOM对象转换成jQuery对象: $(doc ...

  3. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  4. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  5. jQuery实现动画过程中尽量避免出现网页滚动条

    jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.

  6. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  7. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  8. 写多个物件css3循环动画案例原理

    div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: ...

  9. 多行滚动jQuery循环新闻列表代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. java集合-数组ArrayList

    1.简介 ArrayList是java集合框架常用的集合类之一,底层是基于数组来实现容量大小动态变化的. 2.类图(JDK 1.8) 下图是ArrayList实现的接口和继承的类关系图: public ...

  2. ruby基础（三）

    类和模块 1.类 类是面向对象中一个重要的术语.我们可以把类看作是对象的抽象, 所有的这类对象都有这些特征.而对象则是类的具体实现,按照类的要求创建的 对象就是该类的对象.类就像对象的雏形一样,决定了 ...

  3. [Qt] Librecad 源码分析

    libraries jwwlib libdxfrw:一个免费的C++库,用于读写文本格式或二进制格式的DXF文件(C++ library to read and write DXF/DWG files ...

  4. [ML] 高德软件的路径规划原理

    路径规划 Dijkstra s:起点:S:已知到起点最短路径的点:U:未知到起点最短路径的点 Step 1:S中只有起点s,从U中找出路径最短的 Step 2:更新U中的顶点和顶点对应的路径 重复St ...

  5. [刷题] 75 Sort Colors

    要求 给只有0 1 2三个元素的数组排序 思路 方法1:遍历数组,利用辅助数组保存三个元素的个数,再写入(遍历两遍) 辅助数组有三个元素,对应0 1 2的个数 方法2:模拟三路快排,遍历一遍完成排序 ...

  6. mysql基础之mariadb概念

    一.数据库介绍 什么是数据库(Database)? 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们可以通过数据库 ...

  7. rm删除破折号开头的文件或目录

    转载地址:http://blog.chinaunix.net/uid-25266990-id-3458755.html rm删除(清除)一个或多个文件 -f 选项将强制删除文件,即使这个文件是只读的. ...

  8. 信息学C++教程<-3->输入输出格式控制

    二进制输出整数 在计算机系统内的数据本身就是二进制 思考:在C++中,如何通过cout函数来输出二进制的数字呢? 所需库文件:1.iomanip //管理C++格式控制 ​ 2.bitset //二进 ...

  9. Navicat Premium 15 linux 安装与激活 ArchLinux 2021

    查看了很多教程花了半小时才弄好可真不容易 参考https://github.com/orginly/navicat-keygen 下载地址 http://www.navicat.com.cn/down ...

  10. node.js学习(4)事件

    1 导入事件库