一。动画

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

<!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. Spring中Aspect的切入点的表达式定义细节

    用过很多次切面aspect了,对于表达式总是记得很模糊,今天总结一下. 1.切面做如下设置则只会拦截返回值为String类型的方法 @Aspect public class MyInterceptor ...

  2. jquery入门 动态调整div大小，使其宽度始终为浏览器宽度

    有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. <!doctype html> <html> & ...

  3. jquery.validate.js客户端验证

    参考:http://www.runoob.com/jquery/jquery-plugin-validate.html http://www.cnblogs.com/artech/archive/20 ...

  4. Qt5.7学习

    一 Qt简介(Build your world with Qt) 二 Qt5.7.0的安装 三 Qt系统构造库及常用类 四 信号(signal)与槽(slot)通信机制 五 QtDesigner开发工 ...

  5. TCP、UDP、HTTP、SOCKET之间的区别与联系-乾颐堂CCIE

    IP:网络层协议: TCP和UDP:传输层协议: HTTP:应用层协议: SOCKET:TCP/IP网络的API. TCP/IP代表传输控制协议/网际协议,指的是一系列协议. TCP和UDP使用IP协 ...

  6. 空值和null区别

    空值代表杯子是真空的,NULL代表杯子中装满了空气

  7. R语言笔记完整版

    [R笔记]R语言函数总结   R语言与数据挖掘:公式:数据:方法 R语言特征 对大小写敏感 通常,数字,字母,. 和 _都是允许的(在一些国家还包括重音字母).不过,一个命名必须以 . 或者字母开头, ...

  8. Mac下在zsh中配置adb命令

    Mac下自带的终端默认黑白色的,对于一个技术宅来说不能忍啊.然后换成了iTerm,安装上了zsh,安装后界面如下: 这里写图片描述 但是常用的adb命令却找不到了,还向github上提了issue,下 ...

  9. mysql user表 权限字段详解

    Select_priv.确定用户是否可以通过SELECT命令选择数据. Insert_priv.确定用户是否可以通过INSERT命令插入数据. Update_priv.确定用户是否可以通过UPDATE ...

  10. 前端福利之表单input按钮在各浏览器之间的兼容性(转)

    从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下. input按钮在各个浏览器之间的兼容性问题,看下边这段代码: input.item { backgrou ...