一。动画

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

<!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. JAVA中集合转数组遍历

    JAVA中集合的遍历的一种方法时集合转数组遍历,也是就调用Collection中的toArray(). 代码: public static void main(String[] args) {     ...

  2. 字符串匹配——C++使用Regex

    需要#include  < regex >   匹配 regex_match ("subject", std::regex("(sub)(.*)") ...

  3. 15- 1 << k 时的益出

    扩展GCD-时间复杂性 题目: 计算循环语句的执行频次 for (i = A; i != B; i += C) x += 1;其中A, B, C, i都是k位无符号整数. 输入: A B C k, 其 ...

  4. 15-I hate it (HDU1754:线段树)

    http://acm.hdu.edu.cn/showproblem.php?pid=1754     相似例题:  敌兵布阵  http://www.cnblogs.com/zhumengdexiao ...

  5. SqlSugar Asp.Net 高性能ORM框架

    SqlSugar从去年到现在已经一年了,版本从1.0升到了现在的2.4.1 ,这是一个稳定版本 ,有数家公司已经项目上线,在这里我将SqlSugar的功能重新整理成一篇新的贴子,希望大家喜欢. 公司团 ...

  6. C++ STL 全排列函数

    C++  全排列函数...一听名字就在<algorithm>中... 首先第一个说的是next_permutation: #include <algorithm> bool n ...

  7. layer使用注意事项

    ajax一定要设置为异步

  8. .NET开源MSSQL、Redis监控产品Opserver之安全配置

    简介 Opserver是Stack Overflow的开源监控解决方案,由Stack Exchange发布,基于.NET框架构建.开源地址:https://github.com/opserver/Op ...

  9. 部分类Partial

    Partial告诉编译器,一个类,结构,接口的定义源代码可能要分散到一个或者多个源文件中. 在下面的情况下用Partial类型: (1) 类型特别大,不宜放在一个文件中实现.(2) 一个类型中的一部分 ...

  10. SQL的Join语法

    对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于Select出来的结果集是什么样子有点不是很清楚.Codin ...