<!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. php中输出函数的区别

    isset() .empty()与is_null的区别 1.当变量未定义时,is_null() 和"参数本身"是不允许作为参数判断的,会报Notice警告错误: 2.empty , ...

  2. Spring 注解动态数据源设计实践

    Spring 动态数据源 动态数据源是什么?解决了什么问题? 在实际的开发中,同一个项目中使用多个数据源是很常见的场景.比如,一个读写分离的项目存在主数据源与读数据源. 所谓动态数据源,就是通过Spr ...

  3. centos8.2-2004

    ~]# cat /etc/*leaseCentOS Linux release 8.2.2004 (Core)NAME="CentOS Linux"VERSION="8 ...

  4. Linux Test Project(一)

    http://www.vimlinux.com/lipeng/2014/09/12/ltp/ Testing Linux, one syscall at a time. LTP是从SGI开始的,后由I ...

  5. Linux是一个基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的性能稳定的操作系统，可免费使用并自由传播。

    Linux是一个基于POSIX和Unix的多用户.多任务.支持多线程和多CPU的性能稳定的操作系统,可免费使用并自由传播. Linux是众多操作系统之一 , 目前流行的服务器和 PC 端操作系统有 L ...

  6. jmeter 非GUI模式下传参

    为什么要使用非GUI模式?--因为GUI模式下运行的时候消耗的内存比非GUI模式大,会使得压力测试的结果不准确. 根据参数类型分为两种:jmeter.properties和system.propert ...

  7. Linux_yum工具基本概述

    一.什么是yum 1️⃣:yum是yellowdog update manager的简称,它能够实现rpm管理的所有操作,并能够自动解决各rpm包之间的依赖关系. 2️⃣:yum是rpm的前端工具,是 ...

  8. shell基础之综合练习

    0.脚本一键完成下面所有操作1.准备2台centos7系统的服务器,远程互相免密登录,以下所有题目过程中开启防火墙2.给1号机和2号机使用光盘搭建本地yum源(永久生效)3.给服务器1添加2块硬盘,1 ...

  9. 10.4 route：显示或管理路由表

    route命令 可以显示或管理Linux系统的路由表,route命令设置的路由主要是静态路由. 路由的概念     计算机与计算机之间的数据传输必须得经由网络,而网络可以通过直接连接两台计算机的方式或 ...

  10. MyBatis的Example如何按条件排序（Day_35）

    MyBatis的Example如何按条件进行排序? 背景:有时我们在使用mybatis example 进行查询时,需要进行相应的业务排序.本博客以下图为例 @Override public List ...