通过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 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
react antd实现动态增减表单
Jun 03 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面向对象——访问修饰符介绍
2012/11/08 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
js日期联动示例
2014/05/02 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
简单的分页代码js实现
2016/05/17 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
Python深入学习之装饰器
2014/08/31 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
python 字典(dict)按键和值排序
2016/06/28 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Django缓存Cache使用详解
2020/11/30 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android
python三子棋游戏
2022/05/04 Python