jqury动画，循环
一。动画
效果就是定义一个小盒子，让这个小盒子以动画的形式变化尺寸，
<!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动画，循环的更多相关文章
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- 微信小程序——实现动画循环播放
今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以 ...
- Android实现动画循环的方式
每次想到循环播放.重复执行时,脑海中总是冒出在while(true)的实现方式. Thread thread = new Thread(new Runnable(){ public void run( ...
- egret的tween动画循环播放
开发中发现了egret的自带tween动画中tweenGroup没有自动重新播放的代码,就使用了一种较笨的方法进行播放 比如:我在exml皮肤文件中写了一个动画组tweenGroup,并且在ts文件中 ...
- 使用swiper.animate时，给一个对象添加两个动画且动画循环的方法
swiper官网上给对象加一个动画的方法是 <div class="swiper-slide"> <p class="ani" swiper- ...
- 怎样使android的view动画循环弹动
在res中建立文件夹anim,分别写下cycles.xml,shake1.xml,shake2.xml cycles.xml: <?xml version="1.0" enc ...
- 写多个物件css3循环动画案例原理
div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: ...
- 【Visual C++】游戏编程学习笔记之六：多背景循环动画
本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44264153 作者:ZeeCod ...
- CSS3 animation动画，循环间的延时执行时间
如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...
随机推荐
- Nginx源码完全注释（3）ngx_list.h / ngx_list.c
列表头文件ngx_list.h #ifndef _NGX_LIST_H_INCLUDED_ #define _NGX_LIST_H_INCLUDED_ #include <ngx_config. ...
- 145. Binary Tree Postorder Traversal (Stack, Tree)
Given a binary tree, return the postorder traversal of its nodes' values. For example: Given binary ...
- iOS8 无缝切换WKWebView，借鉴IMYWebview，解决进度条，cookie，本地页面等问题
webkit使用WKWebView来代替IOS的UIWebView和OSX的WebView,并且使用Nitro JavaScript引擎,这意味着所有第三方浏览器运行JavaScript将会跟safa ...
- spring4-2-bean配置-10-通过FactoryBean配置bean
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAk8AAAFHCAIAAAA3Hj/JAAAgAElEQVR4nO2dzdX0rA2Gp6asclwQTW
- 第一话：IE中用DOM方法绑定事件
工作比较忙,但是也一定要抽时间出来提升一下自己的基本功,只有技术实力到位,才能为公司和个人创造更多的价值.下面进入主题: IE中事件监听比较容易用到,但是由它所引出的一个关于this的问题,不得不着重 ...
- ReactNative常用第三方控件
Flex可视化在线工具 http://the-echoplex.net/flexyboxes/?fixed-height=on&legacy=on&display=flex&f ...
- 注意for循环中变量的作用域-乾颐堂
1 2 for e in collections: pass 在for 循环里, 最后一个对象e一直存在在上下文中.就是在循环外面,接下来对e的引用仍然有效. 这里有个问题容易被忽略,如果在循 ...
- 用Spring实现文件上传(CommonsMultipartFile)！
2012-02-16 18:10:26| 分类: 计算机--JAVA EE-|字号 订阅 spring中的文件上传实际比较容易1.页面中<html> <body> & ...
- HUST软件测试数媒1501班: 第0周作业成绩
说明 本次公布的成绩包含三次作业的结果: 毕博平台课前测试题 第0周作业1:开设博客 第0周作业2:博客阅读和思考 如果同学对作业结果存在异议,可以: 在线平台的第一周在线答疑中创建话题申诉. 或直接 ...
- command >/dev/null 2>&1 解说
0:表示键盘输入(stdin)1:表示标准输出(stdout),系统默认是1 2:表示错误输出(stderr) command >/dev/null 2>&1 & == ...