Jquery入门学习第三篇

1. 使用基本动画函数

基本的动画函数主要分为show, hide和toggle三个. 都提供了无参数的版本, 表示不适用动画切换元素的显示状态:

$("#divPop").show();

$("#divPop").hide();

$("#divPop").toggle();

都提供了两个参数的重载, 因为回调函数可以省略, 所以可以像开篇实例中使用的, 传入一个数值作为唯一参数, 则会在参数规定的时间内用动画效果显示/隐藏元素:

$("#divPop").show(200);

$("#divPop").hide("fast");

$("#divPop").toggle("slow");

如果传递了200, 表示图层会在200毫秒内通过渐变的形式显示出来. speed参数可以使用三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000).

三个函数都可以传入回调函数callback,签名如下:

function callback() {

this; // dom elementBest price sunglasses

}

在回调函数中的this是执行此函数的DOM对象. 会在动画结束时执行.

2. 使用toggle函数

toggle函数是功能更强大的函数, 可以切换元素的可见状态. 我们经常遇到需要使用toggle的情况. 比如希望一段文字第一次单击显示弹出层, 第二次单击隐藏弹出层.

我们将开篇实例稍作修改即可实现这个效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery Animation - Toggle </title>

$(document).ready(function()

{

//动画速度

var speed = 500;

//绑定事件处理

$("#btnShow").click(function(event)

{

//取消事件冒泡

event.stopPropagation();

//设置弹出层位置Sunglasses Wholesale

var offset = $(event.target).offset();

$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });

//切换弹出层的显示状态

$("#divPop").toggle(speed);

});

</script>

</head>

<body>

<div>

</div>

<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;

width: 300px; height: 100px;">

</div>

</body>

</html>

toggle()函数可以传递一个boolean值的参数, 比如: toogle(true)等同于show(), toogle(fasle)等同于hide().

转载于:https://www.cnblogs.com/imadin/archive/2011/06/28/2092337.html

Jquery入门学习第三篇相关推荐

jQuery框架学习第三天：如何管理jQuery包装集
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
TIA博途SCL入门学习（三）创建SCL程序及更改FB块接口的视图样式
TIA博途SCL入门学习(三)创建SCL程序及更改FB块接口的视图样式 TIA博途中创建SCL程序有2种方式,具体可参考以下内容: 在LAD程序段或FBD程序段种可以插入SCL程序段,实现两种语言混合 ...
菜鸟教程php 文件上传,php入门学习知识点三 PHP上传
if(is_uploaded_file($_FILES["Imgs"]["tmp_name"])){ $phpupfile=$_FILES["Imgs ...
vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
Python精简入门学习（三）
Python精简入门学习之流程控制(上) -流程控制 -While循环: 适用于对未知的循环次数用于判断 -for使用: 适用于已知的循环次数[可迭代对象遍历] -单分支 -双分支 -多分支 [外链 ...
SQL零基础入门学习（三）
SQL零基础入门学习(二) SQL WHERE 子句 WHERE 子句用于提取那些满足指定条件的记录. SQL WHERE 语法 SELECT column1, column2, ... FROM t ...
Autoware入门学习（三）——Autoware软件功能使用介绍（1/3）及demo演示
文章目录 1 Autoware 的官方 demo 演示 1.1 数据下载(点击链接or指令均可) 1.2 Demo 运行 2 Autoware 软件功能使用介绍(1/3) 2.1 Quick Star ...
保安日记：前端学习第三篇之CSS选择器
前端第三篇 Emmet语法快速生成HTML标签快速生成CSS样式 1．比如w200按tab 可以生成width: 200px; 2.比如lh26按tab可以生成line-height:26px; ...
小白入门深度学习 | 第三篇：30分钟入门深度学习 - TensorFlow版
文章目录一.深度学习是什么二.实现过程 1. 准备数据 2. 构建神经网络模型 3. 编译模型 4. 训练模型 5. 预测三.总结课后练手项目(附代码+讲解)

Jquery入门学习第三篇

Jquery入门学习第三篇相关推荐

最新文章

热门文章