<!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. 在ActiveMQ中使用SingleConnectionFactory遇到的坑

    我们在生产环境使用了ActiveMQ作为消息中间件,消息中间件连接到数据库对消息进行持久化. 最近发生了一个奇怪的事情,消费者端的生产日志总是报如下错误: The JMS connection has ...

  2. static 静态文件配置

  3. 7. IDEA概述和安装

    1.1IDEA概述 IDEA全称InteliJ IDEA,是用于Java语言开发的继承环境,它是业界公认的目前用于Java程序开发的最好工具 集成环境:把代码编写,编译,执行,调试等多种功能综合到一起 ...

  4. 小米华为vivooppo手机记录隐私证据查询

    1.在拨号界面输入:*#*#4636#*#* 2.在输入代码之后 手机会自动跳转到下面这个页面 就可以查看她到底拿着手机在干嘛 2 输入下面代码可以检测小米手机的各种信息 *#*#64663#*#* 

  5. 查找目录下的所有文件中是否含有某个字符串 find .|xargs grep -ri "IBM"

    linux查看目录下所有文件内容中是否包含某个字符串 2017-07-25 15:13:22 默一鸣 阅读数 21556 文章标签: linux查找文件夹文件内容字符串 更多 分类专栏: Unix   ...

  6. Linux_yum仓库管理

    一.yum配置本地仓库 1.挂载光盘 [root@localhost ~]# mount /dev/sr0 /mnt/ [root@localhost ~]# df -hT 文件系统 类型 容量 已用 ...

  7. MySQL 查询操作

    目录 基本语法 查询常量 查看表达式 查询函数 查询指定字段 查询所有列 列别名 表别名 条件查询 条件查询运算符 逻辑查询运算符 排序与分页 排序查询(order by) 排序方式 limit 分组 ...

  8. Redis 安装和启动

    Redis 安装 安装准备: redis 压缩包 官网下载地址:https://redis.io/download 安装步骤: 第一步:安装 gcc 编译器 官网发布的 Redis 压缩包是 C 语言 ...

  9. Java并发之AQS原理剖析

    概述: AbstractQueuedSynchronizer,可以称为抽象队列同步器. AQS有独占模式和共享模式两种: 独占模式: 公平锁: 非公平锁: 共享模式: 数据结构: 基本属性: /** ...

  10. 彻底解决Could not transfer artifact org.apache.maven.plugins问题

    今天在学习maven框架的时候出现Could not transfer artifact org.apache.maven.plugins问题,后面根据很多博客综合总结,终于解决了,现在分享一下我的方 ...