jQuery学习笔记之jQuery动画效果


Posted in Javascript onSeptember 09, 2013

基本动画代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World jQuery!</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//基本的动画函数主要分为show, hide和toggle三个. 都提供了无参数的版本
//并且都提供了两个参数的重载,如show( speed, [callback] ), 
//callback,签名如下:function callback() {this;}在回调函数中的this 是执行此函数的DOM 对象. 会在动画结束时执行.
//因为回调函数可以省略, 所以可以传入一个数值作为唯一参数, 则会在参数规定的时间内用动画效果的显示/隐藏元素
//参数可以使用三种预定速度之一的字符串("slow", "normal", "fast")
//或直接使用数字表示动画时长,单位是毫秒数值(如500).

//动画速度
var speed = 500;
//绑定事件处理
$("#btnShow").click(function(event)
{
//取消事件冒泡
event.stopPropagation();
//设置弹出层位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height()+ "px", left: offset.left });
//动画显示
$("#divPop").show(speed);
});
//单击空白区域隐藏弹出层
$(document).click(function(event) { $("#divPop").hide(speed) });
//单击弹出层则自身隐藏
$("#divPop").click(function(event) { 
event.stopPropagation()
$("#divPop").hide(speed);
});

var flip = 0;
$("#btnP").click(function () {
$("p").toggle("fast");
//$("p").toggle( flip++ % 2 == 0 );
});

//绑定事件处理
$("#btnT").click(function(event)
{
//取消事件冒泡
event.stopPropagation();
//设置弹出层位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
//切换弹出层的显示状态
$("#divPop").toggle(speed);
});
});
</script>
</head>
<body>
<div>
<br /><br /><br />
<button id="btnShow">显示提示文字</button>
<button id=btnP>显示段落</button>
<button id=btnT>toggle函数测试</button>
</div>
<!-- 弹出层-->
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px
#000000; position: absolute; display:none;
width: 600px; height: 100px;">
<div style="text-align: center;">弹出层</div>
</div>
<p>这个是一个段落</p>
<p>这个是第二个段落</p>
</body>
</html>

============================================================

滑动动画和透明动画效果代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World jQuery!</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//滑动动画效果
$("#btnShow").click(function(){
$("#divPop").slideDown("fast");
});
$("#btnHide").click(function(){
$("#divPop").slideUp("slow");
});
$("#btnT").click(function(){
$("#divPop").slideToggle("slow");
});

//透明度动画效果
$("#bShow").click(function(){
$("#divPop").fadeIn(2000);
});
$("#bHide").click(function(){
$("#divPop").fadeOut("slow");
});
//指定到透明度
$("#bHelf").click(function(){
$("#divPop").fadeTo("slow",0.3);
});
 
});
</script>
</head>
<body>
<div>
<br /><br /><br />
<button id="btnShow">显示提示文字</button>
<button id="btnHide">隐藏提示文字</button>
<button id=btnT>toggle函数测试</button>
<br />
<button id=bShow>淡入</button>
<button id=bHide>淡出</button>
<button id=bHelf>半透明</button>
</div>
<!-- 弹出层-->
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px
#000000; position: absolute; display:none;
width: 600px; height: 100px;">
<div style="text-align: center;">弹出层</div>
</div>
<p>这个是一个段落</p>
<p>这个是第二个段落</p>
</body>
</html>
Javascript 相关文章推荐
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
vue.extend与vue.component的区别和联系
Sep 19 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
字节飞书面试promise.all实现示例
Jun 16 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 #Javascript
js 控制页面跳转的5种方法
Sep 09 #Javascript
json格式的时间显示为正常年月日的方法
Sep 08 #Javascript
js获取系统的根路径实现介绍
Sep 08 #Javascript
对于this和$(this)的个人理解
Sep 08 #Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 #Javascript
可自己添加html的伪弹出框实现代码
Sep 08 #Javascript
You might like
PHP中的加密功能
2006/10/09 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
怎么清空javascript数组
2013/05/11 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
django使用JWT保存用户登录信息
2020/04/22 Python
如何解决python多种版本冲突问题
2020/10/13 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
C++面试题:关于链表和指针
2013/06/05 面试题
售后服务经理岗位职责范本
2014/02/22 职场文书
学校对教师的评语
2014/04/28 职场文书
酒店前台岗位职责
2015/04/16 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Java基础——Map集合
2022/04/01 Java/Android
Android存储中最基本的文件存储方式
2022/04/30 Java/Android