通过jquery实现页面的动画效果(实例代码)


Posted in Javascript onSeptember 18, 2016

有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一。以下为对该函数使用方式的简要介绍。

animate函数基本形式

通过animate实现动画效果的基本形式为:

$(selector).animate({params},speed,callback);

其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动画在1s内变为params指定样式)、slow以及fast。callback指明动画运行结束后要执行的函数。

代码示例:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
 $("button").click(function(){
  $("div").animate({
   left:'250px',
   opacity:'0.5',
   height:'150px',
   width:'150px'
  });
 });
});
</script> 
</head>
 
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

{params}对象中的变量的多种赋值形式

关于{params}对象中的变量,可以通过如下形式赋值。

绝对值形式

在上文给出的代码示例便是通过绝对值形式来赋值params对象的

相对值形式

比如说在变量值前面加上“+”“-”等。

代码示例:

<script> 
$(document).ready(function(){
 $("button").click(function(){
  $("div").animate({
   left:'250px',
   height:'+=150px',
   width:'+=150px'
  });
 });
});
</script>

show、hide以及toogle

params对象的变量值,我们同样可以赋值为以上三个值,比如下面的代码,其作用便是使div标签内容消失。

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

以上这篇通过jquery实现页面的动画效果(实例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
layui实现三级导航菜单
Jul 26 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
JS实现纸牌发牌动画
Jan 19 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 #Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 #Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 #Javascript
利用jquery实现瀑布流3种案例
Sep 18 #Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 #Javascript
移动端js触摸事件详解
Sep 18 #Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 #Javascript
You might like
php生成xml简单实例代码
2009/12/16 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
js数组操作学习总结
2013/11/04 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python实现读取命令行参数的方法
2015/05/22 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
24岁生日感言
2014/01/13 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
英文升职感谢信
2015/01/23 职场文书
红旗渠导游词
2015/02/09 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL
tree shaking对打包体积优化及作用
2022/07/07 Java/Android