一。动画

效果就是定义一个小盒子，让这个小盒子以动画的形式变化尺寸，

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>jquery 动画</title>

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">

		$(function(){

			/*

			 参数：

			1、属性设置{param1: value1, param2: value2}

			2、speed 时间 ms

			3、swing 默认值 开始和结束慢速，中间快速   linear 匀速

			4、回调函数

			*/

			$('#div1').animate({width:200,height:200},1000,function(){ //首先把盒子尺寸变大至200,1秒内完成

				alert('动画完了！');

				$(this).animate({marginLeft:500},1000,function(){  //然后盒子右移500px

					$(this).animate({marginTop:500},1000);  //最后盒子下移500px

				});

			});

		})

	</script>

	<style type="text/css">

		.box{

			width:100px;

			height:100px;

			background-color: gold;

		}

	</style>

</head>

<body>

	<div id="div1" class="box"></div>

</body>

</html>

　　

二. 循环

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">

		$(function(){

			//$('.list li').html('111');

			//$('.list li').css({background:'gold'});

			$('.list li').each(function(index){

				//index 是索引值

				$(this).html(index);

			})

		})

	</script>

</head>

<body>

	<ul class="list">

		<li></li>

		<li></li>

		<li></li>

		<li></li>

		<li></li>

		<li></li>

		<li></li>

		<li></li>

	</ul>

</body>

</html>

　　

jqury动画，循环的更多相关文章

  1. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  2. 微信小程序——实现动画循环播放

    今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以 ...

  3. Android实现动画循环的方式

    每次想到循环播放.重复执行时,脑海中总是冒出在while(true)的实现方式. Thread thread = new Thread(new Runnable(){ public void run( ...

  4. egret的tween动画循环播放

    开发中发现了egret的自带tween动画中tweenGroup没有自动重新播放的代码,就使用了一种较笨的方法进行播放 比如:我在exml皮肤文件中写了一个动画组tweenGroup,并且在ts文件中 ...

  5. 使用swiper.animate时，给一个对象添加两个动画且动画循环的方法

    swiper官网上给对象加一个动画的方法是 <div class="swiper-slide"> <p class="ani" swiper- ...

  6. 怎样使android的view动画循环弹动

    在res中建立文件夹anim,分别写下cycles.xml,shake1.xml,shake2.xml cycles.xml: <?xml version="1.0" enc ...

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

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

  8. 【Visual C++】游戏编程学习笔记之六：多背景循环动画

    本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44264153 作者:ZeeCod ...

  9. CSS3 animation动画，循环间的延时执行时间

    如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...

随机推荐

  1. sql设置字段默认值

    alter table 表名 modify 字段名 default 默认值;

  2. 由Strurts2漏洞引开谈谈web代码安全问题

    漏洞与补丁齐飞,蓝屏共死机一色. 最近struts2的安全漏洞影响面甚广,此后门为可以在url中直接远程调用脚本的漏洞和一个重定向漏洞.大家可以在s2-016远程执行脚本漏洞和s2-017重定向开放漏 ...

  3. Java多线程—JUC原子类

    根据修改的数据类型,可以将JUC包中的原子操作类可以分为4类. 1. 基本类型: AtomicInteger, AtomicLong, AtomicBoolean ;2. 数组类型: AtomicIn ...

  4. 1、设备网络SDK主要功能

    图像预览.文件回放和下载,云台控制,布防/撤防,语音对讲,日志管理,解码卡,远程升级,远程重启/关闭,格式化硬盘,参数配置(系统配置,通道配置,串口配置,报警配置,用户配置),多路解码器,智能设备功能 ...

  5. AutoComplete的extraParams动态传递参数

    AutoComplete可利用extraParams传递参数,如 extraParams:{para1:'参数1',para2:'参数2'} 但是,如需动态取值作为参数值时却无法达到期望目的,可改为配 ...

  6. 使用BBED理解和修改Oracle数据块

    1.生成bbed list file文件: SQL> select file#||' '||name||' '||bytes from v$datafile; $ vim dbfile.txt ...

  7. C#中利用LINQ to XML与反射把任意类型的泛型集合转换成XML格式字符串

    在工作中,如果需要跟XML打交道,难免会遇到需要把一个类型集合转换成XML格式的情况.之前的方法比较笨拙,需要给不同的类型,各自写一个转换的函数.但是后来接触反射后,就知道可以利用反射去读取一个类型的 ...

  8. Redis实现高并发下的抢购、秒杀功能

    博主最近在项目中遇到了抢购问题!现在分享下.抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个:1 高并发对数据库产生的压力2 竞争状态下如何解决库存的正确减少("超卖" ...

  9. 设计模式3---工厂模式（Factory Pattern简单工厂、工厂方法、抽象工厂）

    工厂模式:主要用来实例化有共同接口的类,工厂模式可以动态决定应该实例化那一个类.工厂模式的形态工厂模式主要用一下几种形态:1:简单工厂(Simple Factory).2:工厂方法(Factory M ...

  10. hdu2993 MAX Average Problem （斜率dp）

    参考:http://www.cnblogs.com/kuangbin/archive/2012/08/27/2657878.html //#pragma warning (disable: 4786) ...