一。动画

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

<!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. Application.LoadLevel & Object.DontDestroyOnLoad

    [Application.LoadLevel] 只有在File->Build Setting中设置了的按钮才能被加载. 当level加载完成后,MonoBehaviour.OnLevelWasL ...

  2. 一张图片优化5k带来的带宽成本及其前端页面的优化方法

    上周,我参加了公司的一门课程<网站性能优化>,讲师提出了一个问题:一张图片优化后减少5K,1年内可以大概省下多少宽带成本呢?非常好奇,仔细听完讲师分析,计算出来的数据让小伙伴们都惊呆了,仅 ...

  3. ubuntu eclipse opencv环境配置

    项目——Properties——C/C++ Build——Settings 配置包含目录: GCC C++ Compiler   ——Includes /usr/include /usr/local/ ...

  4. MAXOS 进程管理

    ps -ef|grep +程序名 注意进程名区分大小写 linux上进程有5种状态:1. 运行(正在运行或在运行队列中等待)2. 中断(休眠中, 受阻, 在等待某个条件的形成或接受到信号)3. 不可中 ...

  5. 访问tomcat出现java.lang.IllegalStateException No output folder错误解决方法

    访问tomcat出现java.lang.IllegalStateException: No output folder错误解决方法 问题:tomcat分为安装版和解压缩版,解压缩版如果解压到安装盘,在 ...

  6. scala初学笔记

    tips: 1.函数的定义: def addOne(m: Int): Int = m + 1 m为参数,要指定其类型,Int: 后边跟着返回值的类型,Int= 后边是函数的内部 2.匿名函数: (x: ...

  7. 4.3.1 ThreadLoacl简单使用

    我们都知道  SimpleDateFormat 这个类是线程 不安全的,那么我下面的程序执行就会遇到问题 public class ParseDateDemo { private static fin ...

  8. spring Aop概念

    面向切面编程(AOP)通过提供另外一种思考程序结构的途经来弥补面向对象编程(OOP)的不足.在OOP中模块化的关键单元是类(classes),而在AOP中模块化的单元则是切面.切面能对关注点进行模块化 ...

  9. Activity Fragment转场动画

    Activity转场动画 先介绍个动画的好例子:https://github.com/lgvalle/Material-Animations Activity的转场动画是通过overridePendi ...

  10. 洛谷P4172 [WC2006]水管局长（lct求动态最小生成树）

    SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可能要将一定量的水从x处送往y处,嘟嘟需要为供水公司找到一条从A至B的水管的路径, ...