<!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. Jmeter(一) - 从入门到精通 - 环境搭建(详解教程)

    1.JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静态和动态资源的性能,例如:静态文件, ...

  2. 【Web前端HTML5&CSS3】08-盒模型补充

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 盒模型补充及田径场实战 1. 盒子大小 2. 轮廓 3. 阴影 4. 圆角 圆 椭圆 盒模型补充及田径场实战 1 ...

  3. kubernetes客户端client-go使用

    下载地址: https://github.com/kubernetes/client-go 官方使用文档参考:https://v1-16.docs.kubernetes.io/docs/referen ...

  4. [DB] Hadoop免密登录原理及设置

    情景: 现有两台电脑bigdata111.bigdata112,bigdata111想免密码登录bigdata112 过程: 1.bigdata111生成公钥(用于加密,给别人)和私钥(用于解密,自己 ...

  5. [Java] Tomcat 部署

    背景 免费web服务器,Apache组织发布,Sun公司开发 基于Java,平台无关 可部署Web应用,为客户端提供服务 使用 启动 运行 \tomcat\bin\startup.bat 出现&quo ...

  6. Java 常量值的数据类型

    Java 常量值(也叫字面量)和变量一样,也是有数据类型的. 经常有面试题考察你对 Java 常量值数据类型的理解,如下: float a = 3.3; 问你这一行代码是否正确?答案肯定是不正确.为什 ...

  7. S11 Linux系统管理命令

    11.1 lsof:查看进程打开的文件 11.2 uptime:显示系统的运行时间及负载 11.3 free:查看系统内存信息 11.4 iftop:动态显示网络接口流量信息 11.5 vmstat: ...

  8. 3分钟 Markdown 快速入门(超详细)(Day_33)

    Markdown 快速入门 (这个贼重要)注:所有符号要在英文状态下完成哦,中文是没有效果的. 1.标题 # 表示一级标题 ## 表示二级标题 ### 表示三级标题 #### 表示四级标题 ##### ...

  9. Azure Synapse Link for Dataverse

    MyBuild - Scale, analyze and serve Microsoft Dynamics 365 application data with Azure 本周的微软Bulid大会上发 ...

  10. 我眼中的WebViewJavascriptBridge(图解)

    工作中涉及到一段时间iOS开发,在开发中有个小小的框架让我非常深刻,就是WebViewJavascriptBridge,用于原生控件与前端交互通信.我觉得WebViewJavascriptBridge ...