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参数,样式,时间 ...
随机推荐
- 在centos7下安装python3
环境搭建 准备工具: centos7:http://mirror.bit.edu.cn/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1611.iso virtus ...
- XML编辑工具
[标题]XML编辑工具 [开发环境]Qt 5.2.0 [概要设计]使用QT的视图/模型结构.treeview控件以树形结构显示所要操作的XML文件,并实现xml的相关操作 [详细设计] 主要包含 no ...
- 在Adapter中如何关闭当前Activity
很多时候我们需要在点击adapter条目的时候关闭当前界面,把所点击条目的信息带到前一个界面,同时关闭当前界面. 这个 时候就需要在adapter对某一个点击事件做处理. 代码如下: holder.l ...
- 写给Android App开发人员看的Android底层知识（1）
这个系列的文章一共8篇,我酝酿了很多年,参考了很多资源,查看了很多源码,直到今天把它写出来,也是战战兢兢,生怕什么地方写错了,贻笑大方. (一)引言 早在我还是Android菜鸟的时候,有很多技术我都 ...
- iOS UIAlertView 文字对其方式 文字大小 设置方法
- (void) willPresentAlertView:(UIAlertView *)alertView { for (UIView *subViewin alertView.subviews) ...
- ios runtime 打印内 内部调用的属性
unsigned int count = 0; // 拷贝出所有的成员变量列表 Ivar *ivars = class_copyIvarList([UITextField class], &c ...
- The leaflet package for online mapping in R（转）
It has been possible for some years to launch a web map from within R. A number of packages for doin ...
- kafka 0.10.2 cetos6.5 集群部署
安装 zookeeper http://www.cnblogs.com/xiaojf/p/6572351.html安装 scala http://www.cnblogs.com/xiaojf/p/65 ...
- java 与操作系统进程同步问题（一）————互斥问题
最近学校开设了操作系统原理课程,老师要求用任意语言去模拟进程的同步和互斥问题. 在尝试的写了之后,发现这个问题非常有意思,故想记录在博客中,作为自己的学习轨迹. 个人还是比较喜欢用Java语言,所以采 ...
- Java中的向上造型和向下造型等
package com.study.oop.day01; /** * 如果某个方法是静态 的,它的行为就不具有多态性 * @author LuHongGang * @date 2017年6月5日 ...