您的位置:知识库 » Web前端

从零开始学习jQuery (七) jQuery动画-让页面动起来!

作者: ziqiu.zhang  来源: 博客园  发布时间: 2009-05-11 10:28  阅读: 29636 次  推荐: 4   原文链接   [收藏]  
摘要:开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单!
[1] 从零开始学习jQuery (七) jQuery动画-让页面动起来!
[2] 从零开始学习jQuery (七) jQuery动画-让页面动起来!
[3] 从零开始学习jQuery (七) jQuery动画-让页面动起来!
[4] 从零开始学习jQuery (七) jQuery动画-让页面动起来!
[5] 从零开始学习jQuery (七) jQuery动画-让页面动起来!

系列文章导航:

从零开始学习jQuery (一) 开天辟地入门篇

从零开始学习jQuery (二) 万能的选择器

从零开始学习jQuery (三) 管理jQuery包装集

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

从零开始学习jQuery (五) 事件与事件对象

从零开始学习jQuery (六) AJAX快餐

从零开始学习jQuery (七) jQuery动画-让页面动起来!

从零开始学习jQuery (九) jQuery工具函数

从零开始学习jQuery (十) jQueryUI常用功能实战

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件


四. 基本动画函数

上例中使用的show()和hide()是我们使用最多的基本动画函数. 

下面是jQuery的基本动画函数:

基本动画函数 Basics

名称 说明 举例
show( )

显示隐藏的匹配元素。

这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。

显示所有段落:
$("p").show()
show( speed, [callback])

以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。

用缓慢的动画将隐藏的段落显示出来,历时600毫秒:
$("p").show(600);
hide( )

隐藏显示的元素

这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。

隐藏所有段落:
$("p").hide()
hide( speed, [callback] )

以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。

用600毫秒的时间将段落缓慢的隐藏:
$("p").hide("slow");
toggle( )

切换元素的可见状态。

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

切换所有段落的可见状态:
$("p").toggle()
toggle( switch )

根据switch参数切换元素的可见状态(ture为可见,false为隐藏)。

如果switch设为true,则调用show()方法来显示匹配的元素,如果switch设为false则调用hide()来隐藏元素。

切换所有段落的可见状态:
var flip = 0;
$("button").click(function () {
   $("p").toggle( flip++ % 2 == 0 );
});
toggle( speed, [callback] )

以优雅的动画切换所有匹配的元素,并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。

用200毫秒将段落迅速切换显示状态,之后弹出一个对话框:
$("p").toggle("fast",function(){
alert("Animation Done.");
});

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 element
}

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

2. 使用toggle函数

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
l1/DTD/xhtml1-transitional.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Animation - Toggle </title>

<script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>

<script type="text/javascript">
$(document).ready(
function()
{
//动画速度
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").toggle(speed);

});
});
</script>

</head>
<body>
<div>
<br /><br /><br />
<button id="btnShow">提示文字</button>
</div>

<!-- 弹出层 -->
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: a
bsolute; display:none;
width: 300px; height: 100px;"
>
<div style="text-align: center;">弹出层</div>
</div>
</body>
</html>

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

4
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻