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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
toString()一个会自动调用的方法
Feb 08 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 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 生成唯一id的几种解决方法
2013/03/08 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
js获取内联样式的方法
2015/01/27 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python海龟绘图实例教程
2014/07/24 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
店长岗位的工作内容
2013/11/12 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
酒店员工培训方案
2014/06/02 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2014年防汛工作总结
2014/12/08 职场文书
英语通知范文
2015/04/22 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
MySQL之DML语言
2021/04/05 MySQL
Python中字符串对象语法分享
2022/02/24 Python