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参数,样式,时间 ...
随机推荐
- XML编辑工具
[标题]XML编辑工具 [开发环境]Qt 5.2.0 [概要设计]使用QT的视图/模型结构.treeview控件以树形结构显示所要操作的XML文件,并实现xml的相关操作 [详细设计] 主要包含 no ...
- Apache solr(一)
概念:Apache Solr 是一个开源的搜索服务器.Solr 使用 Java 语言开发,主要基于 HTTP 和 Apache Lucene 实现.Apache Solr 中存储的资源是以 Docum ...
- php中for循环的应用1
for 循环是 PHP 中最复杂的循环结构.它的行为和 C 语言的相似.在PHP中使用的是执行相同的代码集的次数. for 循环的语法是: for (expr1; expr2; expr3)state ...
- Android stdio打开特定网页
博主懒不想打字,直接上程序 package com.example.testopen; import android.app.Activity; import android.os.Bundle; ...
- JMETER 不同线程组 变量值 的参数传递
线程组 1 在线程组1中使用__setProperty函数设置jmeter属性值(此值为全局变量值),将所需变量值如${token}设置为jmeter属性值,即newtoken,示例: 1.添加- ...
- Js之浅谈dom操作
JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...
- RedHat7上安装MySQL5.7.16
1.查看系统中是否已将安装MySQL,如果安装了,需要卸载. [root@chenguo etc]# rpm -qa|grep -i mysql 2.创建用户和组 [root@chenguo ~]# ...
- Xmpp学习之Android-smack入门指导
Xmpp学习之Android-smack入门指导 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:http://www.cnblogs.com/cavalier-/p/69404 ...
- Eclipse导入项目常见问题----乱码问题03
有时打开导入的项目文件时,会出现如下图情况: 解决方法 如下图步骤所示: 此时,我们可以看到文件正常了 jdk版本问题(有个红色感叹号)01:http://blog.csdn.net/baidu_37 ...
- Javascript加载执行顺序
本文主要内容 一.不同位置的script标签执行顺序 二.document.ready和window.onload的区别 一.不同位置的script标签执行顺序 整个加载的过程从解析头部开始,比如ht ...