一。动画

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

<!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. 刷题向》关于一道比较优秀的递推型DP（openjudge9275）（EASY+）

    先甩出传送门:http://noi.openjudge.cn/ch0206/9275/ 这道题比较经典, 最好不要看题解!!!!! 当然,如果你执意要看我也没有办法 首先,显然的我们可以用 f [ i ...

  2. 爬虫解析：XPath总结

    1.加载 XML 文档 所有现代浏览器都支持使用 XMLHttpRequest 来加载 XML 文档的方法. 针对大多数现代浏览器的代码: var xmlhttp=new XMLHttpRequest ...

  3. 78. Subsets 求所有子集（有重复就continue）

    ［抄题］: Given a set of distinct integers, nums, return all possible subsets (the power set). Note: The ...

  4. linux系统中的变量

    一.定义 所谓的变量,就是就是利用一个特定的"名称"(name)来存取一段可以变化的"值"(value),简单说来就是“用一个名称储存一个数值”.   二.设定 ...

  5. 制作initramfs/initrd镜像

    Linux kernel在自身初始化完成之后,需要能够找到并运行第一个用户程序(这个程序通常叫做"init"程序).用户程序存在于文件系统之中,因此,内核必须找到并挂载一个文件系统 ...

  6. 隐藏在default construct后面的是什么

    C++新手很容易陷入两个认识上的误区: 1.任何类如果不显示的定义一个构造函数那么编译器就会构造出一个默认构造函数. 2.默认构造函数负责类的所有数据成员的初始化,显然不是这样的. 为什么不是这样的, ...

  7. Openssl verify命令

    一.简介 verify命令对证书的有效性进行验证,verify 指令会沿着证书链一直向上验证,直到一个自签名的CA 二.语法 openssl verify [-CApath directory] [- ...

  8. java的web配置文件的“<load-on-startup>的说明[转]

    <servlet> <servlet-name>log4jInitServlet</servlet-name> <servlet-class>org.s ...

  9. p4980 polya定理

    传送门 分析 orz ymh 代码 #include<iostream> #include<cstdio> #include<cstring> #include&l ...

  10. Linux 上安装 rlwrap

    1.安装rlwrap的初衷; 2.安装rlwrap工具和遇到的问题; 3.使用rlwrap 工具; 1.安装rlwrap的初衷: 在Windows 下使用SQLPLUS都是可以使用上下左右方向键前后左 ...