jq-animate
jq-animate:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
.btn{
font-size: 20px;
padding: 4px 8px;
}
.box{
width: 140px;
height: 100px;
background: green;
font-size: 24px;
border: 2px solid blue;
position: absolute;
left: 40px;
top: 60px;
}
</style>
</head>
<body>
<button class="btn">动画</button>
<div class="box">我是div标签</div> <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
$('.btn').click(function (){
$('.box').animate({
left:'1000px'
},{
// queue:true,
duration:1000,
easing:'swing',
complete:function (){
$('.box').css('background','red');
}
}).animate({
top:'500px'
},{
// queue:true,
duration:1000,
easing:'swing',
complete:function (){
$('.box').css('background','blue');
}
});
})
</script>
</body>
</html>
jq-animate的更多相关文章
- CSS3 animation 与JQ animate()的区别
CSS3 与 JQ 根本区别 css3 animation与jQuery animate()区别在于实现机制不同 C3和JQ 完成动画的优缺点 1.css3中的过渡和animation动画都是基于cs ...
- jq animate 的第二写法
俩个参数的写法 例子: $('#div1').animate({num:'auto'},{ duration : 1000, //运动时间 easing : 'linear', //运动形式 ...
- jquery动画，基础以及我发现的新大陆
$.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...
- JS实现动画原理一（闭包方式）
前提: 你必须了解js的闭包(否则你看不懂滴) 我们就来做一个js实现jq animate的动画效果来简单探索一下,js动画实现的简单原理: html代码 <div id=&q ...
- easyui源码翻译1.32--panel(面板)
前言 昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系 比如datagrid 的渲染需要panel.resizable.linkbutton.pagination 今 ...
- 媒体文件audio 转 base64 编码 （利用 FileReader & Audio 对象）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JQuery笔记(二)jq常用方法animate()
在jq中,比较方便的是相对于js,jq封装了很多方法,很方便使用,下面我举几个常用的方法 animate()方法 <!DOCTYPE html> <html lang="e ...
- jq小demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- animate()--jq动画
2参数,样式,时间 $(this).animate({top:"100px","opacity": "0"},1000) 3参数,样式,时间 ...
随机推荐
- Linux设备中的并发控制
一.自旋锁1.定义自旋锁:spinlock_t lock2.初始化自旋锁:spin_lock_init(lock)3.获得自旋锁:spin_lock(lock)4.释放自旋锁:spin_unlock( ...
- C语言中，隐藏结构体的细节
我们都知道,在C语言中,结构体中的字段都是可以访问的.或者说,在C++ 中,类和结构体的主要区别就是类中成员变量默认为private,而结构体中默认为public.结构体的这一个特性,导致结构体中封装 ...
- 使用Fiddler进行http抓包和调试
本文目录 : Fiddler的工作原理 Fiddler的常用操作 支持https解密分析 Fiddler的断点调试 本文小结 参考文献 俗话说:工欲善其事,必先利其器. Fiddler是windows ...
- SAS PROC MCMC example in R: Logistic Regression Random-Effects Model（转）
In this post I will run SAS example Logistic Regression Random-Effects Model in four R based solutio ...
- Python教程(2.7)——条件分支
像其它语言一样,Python也有条件分支. 例如,输入用户年龄,可能需要判断是否成年,并做出不同反应.这就需要用到条件分支. if条件分支 if条件分支的一般格式如下: if condition: s ...
- js与jQuery对象相互转换
// jQuery-->JavaScript 两种方法: $(selector).get(index) ; $(selector)[index]; // JavaScript-->jQue ...
- #415 Div2 C
#415 Div2 C 题意 给定一个数字集合,找到所有子集合最大值与最小值之差的和. 分析 列式子,找规律. $ (a_2 - a_1) * 2^0 + (a_3 - a_1) * 2^1 + .. ...
- python3-如何正常使用HTMLTestRunner.py，生成自动化测试报告
其实HTMLTestRunner.py是基于python2开发的,为了使其支持python3环境,需要对其的部分内容进行修改.下面我们通过编辑器打开HTMLTestRunner.py文件(编辑器可以选 ...
- Yii2中限制访问某控制器的IP(IP白名单)
有关Yii2.0鉴权之访问控制过滤器参考这篇文章 http://www.yiiframework.com/doc-2.0/guide-security-authorization.html 这里主要 ...
- 快学scala
scala 1. scala的由来 scala是一门多范式的编程语言,一种类似java的编程语言[2] ,设计初衷是要集成面向对象编程和函数式编程的各种特性. java和c++的进化速度已经大不如 ...