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参数,样式,时间 ...
随机推荐
- 服务器数据库挂掉 Can 't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock '(2) ";
刚刚遇到这个报错,我无语了,我这么个菜逼,咋解决,还好师兄(付付)解决了,付付真棒,在此记录一下,以供学习 Can 't connect to local MySQL server through s ...
- React入门---开始前的准备(下)-3
React开始前的准备(下): ·配置webpack热加载(热加载就是修改js文件,点击保存之后,浏览器会自动刷新,提高开发效率) 1. 全局安装: npm install webpack -g np ...
- vue动态加载图片，取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
- System.arraycopy(src, srcPos, dest, destPos, length) 与 Arrays.copyOf(original, newLength)区别
//System.arraycopy,只拷贝已存在的数组元素 int[] src = {0, 1, 2}; int[] dest = new int[3]; System.arraycopy(src, ...
- shell群发邮件脚本
linux版本:CentOS 6.7 //可以使用lsb_release -a查看 一.修改/etc/mail.rc set from=123456@qq.com //你自己的真实邮箱 ...
- Tomcat8-源码编译及开发
前言 下载Tomcat8源码进行分析,最好的方式,可以编译及运行,从网上查询了很多方式,总是不能完整的运行,由于本人采用idea编辑器,所以喜欢maven的方式,所以综合了网上的多种方案,最终可以在i ...
- scauoj 18025 小明的密码 数位DP
18025 小明的密码 时间限制:4000MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC Description 小明的密码由N(1<=N& ...
- Unity 遮罩 点击panel以外的位置，panel关闭
public Class Panel_ATMRechage : IPanel{ private Dictionary<string,UISprite>mSprites; } protect ...
- 每天一道Java题[11]
题目 synchronized怎么实现线程同步?请修改<每天一道Java题[10]>中的MyRunnableThread类以解决三个线程都获取到10的问题. 解答 方法一: 采用synch ...
- Js实现京东无延迟菜单效果(demo)
一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...