jquery实现动画
animate() 方法
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
注意：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。animate可以使用预定义的值，在执行的过程中如果有多个animate方法，则依次执行（见例2）。
例1：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jquery还可以操作多个属性：
例如：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
注意：(1)几乎可以用animate方法来操作所有的CSS属性。但是所有css属性需要用驼峰写法，比如padding-left需要写成paddingLeft
(2)生成颜色动画需要去jquery.com里面下载 Color Animations插件。这个插件不包括在jquery库里面。
例2：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jquery实现动画的更多相关文章
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- jQuery的动画处理总结
最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...
- jQuery实现动画过程中尽量避免出现网页滚动条
jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.
- jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining
一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...
- 精选7款绚丽的HTML5和jQuery图片动画特效
在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- jQuery 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...
- 放弃使用jQuery实现动画
在Web开发的圈子里,开发人员经常觉得CSS动画是一种高性能web动画技术.假设想让网页载入的更快一些,就应该用纯CSS动画.事实上这样的观点是错误的,非常多开发人员早就放弃了javascript的动 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- [手机取证] 绕过屏幕锁定启用调试模式-For Android 4.4.2
Google在Android 4.x中引入了调试信任机制,类似于iOS,在设备有屏幕密码的情况下首次连接(或未记住计算机)的情况下, 需要首先打开屏幕锁定后才可进行调试启用操作. 在Android 4 ...
- Google Developing for Android 三 － Performance最佳实践
Google Developing for Android 三 - Performance最佳实践 发表于 2015-06-07 | 分类于 Android最佳实践 原文 Developing ...
- Json格式转换
验证Json格式可以进入 http://json.cn/ json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构1.对象:对象 ...
- Python-0 简述
#1 应用广泛: 豆瓣 youtube 云存储相关 #2 初步学习内容:
- eclipse 引用项目（转）
1. 项目右键 -->Properties 2. Java Build Path a) Projects --> Add b) Required Project Selection - ...
- 通过Windows组策略限制证书组织流氓软件的安装运行
https://liwei2.com/2015/11/27/378.html关于如何提取证书,请参阅:https://www.zhihu.com/question/26917038http://www ...
- 前端学习实践笔记--JavaScript深入【2】
趁热继续再来学习一波,接下来主要介绍函数,object,数组,面向对象,new实例化. 在介绍“对象”之前,首先得梳妆打扮一番吧,那这梳妆打扮主要有两条路线,一条是淑女范(利用函数对象化),一条是邻家 ...
- centos 7 用yum安装 mysql
首先centos7 已经不支持mysql,因为收费了你懂得,所以内部集成了mariadb,而安装mysql的话会和mariadb的文件冲突,所以需要先卸载掉mariadb,以下为卸载mariadb,安 ...
- JS传递对象数组为参数给后端，后端获取
前端JS代码: var conditons = []; var test1 = new Object(); test1.name="1"; test1.id="2&quo ...
- appium + maven +jenkins 基本入门之二 新建maven 的java项目
1: 下载maven : 1.0 :设置maven的环境变量: 1.1: 设置maven本地仓库: 在下载好的maven文件夹找到 apache-maven-3.3.9/conf 文件夹下的setti ...