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 相关文章推荐
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php eval函数用法总结
2012/10/31 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
Python几种常见算法汇总
2020/06/02 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
工作失误检讨书范文大全
2014/01/13 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
入党积极分子个人总结
2015/03/02 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
MySQL数据库 任意ip连接方法
2022/05/20 MySQL
vue如何清除浏览器历史栈
2022/05/25 Vue.js