jQuery-animate万能动画效果
问题:效果受局限
解决:万能动画函数:animate()
animation()可对数值类型的CSS样式执行定时器动画
包括:宽高,位置,透明度,边框宽度,字体大小
强调:不能对非数值类型属性做动画
包括:(颜色,背景图片,字体,display)
如何使用:
$(...).animate(params,speed-速度,easing-效果,fn)
其中:params:{css属性1:值1,css属性2:值2,....}
speed:{动画持续时间/速度}
easing:{速度的变化效果}
fn:动画结束后,自动调用的回调函数 动画中的排队和并发
排队:多个动画顺序,先后执行
并发:多个动画同时执行 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#d1{border:1px solid #aaa;
border-radius: 6px;
background:#eee;
word-break: break-all;
width: 200px;
height: 200px;
position:absolute;
}
</style>
</head>
<body>
<h1>jQuery动画函数---透明函数</h1>
<button id="btn1">开始动画</button>
<br/><br/><br/><br/>
<div id="d1">
jksahdkjhjashdjaskdhjksahdkjh
</div>
<script src="javascript/jquery-1.11.3.js"></script>
<script>
$("#btn1").click(function(){
$("#d1").animate({left:"300px"},2000)
.animate({top:"300px"},2000)
})
</script>
</body>
</html>
jQuery-animate万能动画效果的更多相关文章
- animate实现动画效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Jquery如何使用动画效果改变背景色
Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...
- JQuery图片切换动画效果
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...
- jQuery之简单动画效果
1. show()显示动画 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow",&quo ...
- JQuery(二)——简单动画效果
上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...
- jQuery的事件,动画效果等
一.事件 click(function(){}) 点击事件 hover(function(){}) 悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){}) ...
- python 之 前端开发( jQuery事件、动画效果、.each()、 .data())
11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); // 绑定方 ...
- Jquery基础(动画效果的轮播图特效)
jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...
- [学习笔记]jQuery实现一些动画效果的方法
jQuery实现效果的方法 1,隐藏和显示:hide(),show(),toggle() // [ˈtɑ:gl]切换 语法: $(selector).hide(speed,callback); $( ...
随机推荐
- cocoa开发Mac小试笔记
急需纠正自己的错误认识,Mac开发和iOS开发UI显示.事件交互.生命周期等存在极大的差距 首先点击事件NSButton和UIButton完全是两个不同的东西 列表UITableView和NSTabl ...
- ASP_NET实现界面无刷新的DropdownList两级联动效果
所谓DropdownList联动,也就是在选一个DropdownList的时候使另外一个DropdownList的内容更新(如选省份时显示所属城市),按常规的方法那就是在第一个DropdownList ...
- php值callback类型和匿名函数(闭包)
callback.callable类型 自PHP5.4起可以使用callable类型制定回调类型callback. 本文档基于同样理由使用callback类型信息. 一些函数如call_user_fu ...
- Chap4:区块链的应用技术[《区块链中文词典》维京&甲子]
- day 0314函数的进阶
1.空间:内置空间,全局空间,局部空间. 内置空间:空间存放python解释器,为我们提供了方便的名字:input,print,str,list,tuple 三个空间的加载顺序: 内置空间>&g ...
- Instruments学习之Core Animation学习
当App发展到一定的规模,性能优化就成为必不可少的一点.但是很多人,又对性能优化很陌生,毕竟平常大多时间都在写业务逻辑,很少关注这个.最近在优化自己的项目,也收集了很多资料,这里先浅谈一下使用Inst ...
- mysql数据库的备份和还原
mysql数据库的备份命令:mysqldump -u root -p 要备份的现有数据库名 > 备份后的sql文件名.sql,例如: mysqldump -u root -p heal ...
- 机器Coding For WinForm
declare @objname varchar(90)='AutoProjectModel'declare @modelns varchar(90)='ACL.Models'declare @dpc ...
- C# Asp.net使用FormData对象实现ajax提交表单及上传图片
1.html代码: <form id="postForm"> 文件名:<input type="text" name="filena ...
- Maven中groupId和artifactId的含义
groupId和artifactId被统称为“坐标”是为了保证项目唯一性而提出的,如果你要把你项目弄到maven仓库去,你想要找到你的项目就必须根据这两个id去查找.groupId是项目组织唯一的标识 ...