jQuery实现基本动画效果的方法详解


Posted in jQuery onSeptember 06, 2018

本文实例讲述了jQuery实现基本动画效果的方法。分享给大家供大家参考,具体如下:

animate()方法用于创建自定义动画

语法:

$(selector).animate({params},speed,callback);
  • params:必须 定义形成动画的CSS属性
  • speed:可选  规定效果的时常:slow,fast或毫秒
  • callback:可选  动画完成后所执行的函数名称。

jQuery animate()——操作多个属性

默认情况下,所有HTML元素的位置都是静态的,并且无法移动,如需对位置进行操作,记得首先把元素的CSS position 属性设置为 relative、fixed或absolute。

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<br />
<br />
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

运行结果:

jQuery实现基本动画效果的方法详解

absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。

当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来。

Top的值表示对象上边框与浏览器窗口顶部的距离,bottom的值表示对象下边框与浏览器窗口底部的距离,两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将于原文档流位置一致,即垂直保持位置不变。

Left的值表示对象左边框与浏览器窗口左边的距离,right的值表示对象右边框与浏览器窗口右边的距离,两者同时存在时,只有Left起作用,如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。

ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档中偏移位置。

当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置。

Top的值表示对象相对原位置向下偏移的距离,bottom的值表示对象相对原位置向上偏移的距离,两者同时存在时,只有Top起作用;

left的值表示对象相对原位置向右偏移的距离,right的值表示对象相对原位置向左偏移的距离,两者同时存在时,只有left起作用。

jQuery animate()——使用预定义的值

可以将属性的动画值设置成"show"、"hide"或者"toggle"

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

jQuery animate()——使用队列功能

jquery提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个animate()调用,jQuery会创建包含这些方法调用的"内部"队列。然后逐一运行这些animate调用。

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.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>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

运行结果:

jQuery实现基本动画效果的方法详解

eg:将<div>元素移到右边,然后增加文本的字号。

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>开始</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">Tian</div>
</body>
</html>

运行结果:

jQuery实现基本动画效果的方法详解

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery滑动效果实现方法分析
Sep 05 #jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 #jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 #jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 #jQuery
You might like
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
Vue2路由动画效果的实现代码
2017/07/10 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
Vue性能优化的方法
2020/07/30 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
tensorflow获取变量维度信息
2018/03/10 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python操作yaml说明
2020/04/08 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
班级聚会策划书
2014/01/16 职场文书
小组合作学习反思
2014/02/18 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
2014年图书室工作总结
2014/12/09 职场文书
新员工入职感想
2015/08/07 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
Python 视频画质增强
2022/04/28 Python