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参数,样式,时间 ...
随机推荐
- springcloud(二)：注册中心Eureka
Eureka是Netflix开源的一款提供服务注册和发现的产品,它提供了完整的Service Registry和Service Discovery实现.也是springcloud体系中最重要最核心的组 ...
- 如何用PHP遍历文件数目 或删除目录下的全部文件？
先说一下基础知识: 文件位置如下图所示: 1.判断是文件还是目录 var_dump(filetype("./aa/bb/cc.txt")); 输出: string(4) " ...
- Unity使用Mono.Xml代替System.Xml 测试
测试环境 操作系统:Windows8.1 开发工具:Unity5.5.2 1.新建一个测试项目,观测引用System.Xml与Mono.Xml解析文件正确性,与打包后APK体积大小. 2.Mono.X ...
- tomcat类加载体系
类加载,再来一发. 研究完java提供的类加载机制,再来看看tomcat开出了那些花. 最近开始读tomcat的源码,主线路当然是类加载机制,在这个过程中有豁然开朗的感觉.这一篇主要是自己的体会,而不 ...
- JBoss 主要模块
JBoss EJB 容器是JBoss 服务器的核心实现.它有两个特征,第一个是在运行期间生产EJB对象的Stub 和Skeleton 类, 第二是支持热部署. JBossNS 是JBoss 命名服务用 ...
- Promise简介
Promise是ES6中的函数,规范了如何处理异步任务的回调函数,功能类似于jQuery的defferred.简单说就是通过promise对象的不同状态调用不同的回调函数.目前IE8及以下不支持,其他 ...
- Unity应用架构设计(10)——绕不开的协程和多线程（Part 2）
在上一回合谈到,客户端应用程序的所有操作都在主线程上进行,所以一些比较耗时的操作可以在异步线程上去进行,充分利用CPU的性能来达到程序的最佳性能.对于Unity而言,又提供了另外一种『异步』的概念,就 ...
- JS中判断数组的方法
JavaScript中检测对象的方法 1.typeof操作符 这种方法对于一些常用的类型来说那算是毫无压力,比如Function.String.Number.Undefined等,但是要是检测Arra ...
- Predix Asset Service深度分析
前言 在IIOT领域,面临着保存海量数据的挑战,具体到Asset层面,则要保存物理对象,逻辑对象,复杂的关系,并支持对象间的组合,分类,标签和高效查询.总结来说,可以归纳为如下几种需求: 灵活的建 ...
- Spring框架之IOC(控制反转)
[TOC] 第一章Spring框架简介 IOC(控制反转)和AOP(面向方面编程)作为Spring框架的两个核心,很好地实现了解耦合.所以,简单来说,Spring是一个轻量级的控制反转(IoC)和面向 ...