有关jQuery动画的认识

我知道最近我大多数的文章都在关注jQuery，对于那些不了解或没兴趣的人，我真要劝你们还是花几个小时在它上面吧。jQuery留给我许多值得兴奋的回忆（至少关于WEB的）。我肯定你会从不少人那里听到取笑jQuery的声音……不必担心不同的浏览的修正问题（我很讨厌）;不必再去为了只修改一个元素而动用数十行的代码。jQuery安排好了一切。如果你仍然不服气，为什么不去读一读《为什么你不用jQuery》呢？文章将带你一步一步从起点开始了解jQuery。

这篇文章是动画专题，这可是jQuery库的精华部分。我们首先来关注简单的“show/hide”方法。然后我们会继续进行一些自定义的动画操作。那么让我们来彻底了解这些机制。

简单的动画

在我早期的jQuery文章中已经对这些功能有了概述，如果你需要更多的帮助，请参考。

“show”和”hide”是什么？它们是干什么的？

在你的html文档里，为一个元素调用”Hide()”方法，会将该元素的display样式改为”none”。以下CSS和jQuery的代码完成的功能是相同的。

#someElement
{
display: none;
}

$(“#someElement”).hide();

我敢肯定你会自己弄明白”Show()”方法就是将元素变回display的初始状态。再看看以下的代码段的功能也是一样的。

#someElement
{
display: inline;
}

$(“#someElement”).show();

“Show()”和”Hide()”方法会让元素动起来吗？

会，也不会。不带任何参数的情况下，它不会有动画。但，在调用”Show()”方时，如果我们希望看到元素慢慢地显示出来呢？在这种情况下，我们不得不采用”slow”关键字。看例子……

$(“#someElement”).show(“slow”);

现在，当该代码运行，元素将慢慢地在0.6秒内显示出来。这个速度参数，我们可以任选一个长度的速度关键字在某个动画中运行。速度关键字有”slow”,”normal”和”fast”（长度分别是0.6秒,0.4秒和0.2秒）。除此这外，我们还可以为速度指定一个数字……

$(“#someElement”).show(1000);

这将使元素在1秒钟（1000毫秒）内显示出来。注意，当使用速度关键字时要加引号，而然在指定数字时就不需要加引号。

奇妙的”Show()”方法，我们实际上并没有花费太多的力气就能得到相当好的效果。在这个方法中，我们改变元素的不透明度、宽度和高度的值。jQuery库的其它动画方法，从另一个角度讲，恐怕需要改变一下特性。

FadeIn() 和 FadeOut()

Fade方法只改变元素的不透明度。FadeOut()在指定的一段时间内降低元素的不透明度，直到元素完全消失(display:none)。很明显FadeIn()则相反。作为显示和隐含的方法，我们可以引入我们的”slow”,”normal”和”fast”这些关键字。

假设有一个超链接，当它被点击后慢慢地消失了（淡出）。首先看看例子，然后再看看代码。

$(document).ready(function()
{
$(”#someId”).click(function()
{
$(this).fadeOut(”slow”);
});
});

HTML文档打开完成，我们要侦听一个ID为”someId”的超链接的点击事件，当被点击，this（即被点击的超链接对象）会慢慢消失（淡出）。

slideUp() 和slideDown()

slide方法只会改变元素的高度。如果一个元素的display样式为none，当调用”slideDown”方法时，这个元素将按指定高度由上至下延伸显示。该动画方法和其它动画方法一样支持关键字和数字参数。

自定义动画

许多情况下，你可能需要对你的动画有更多的控制。有些是jQuery内置方法办不到的，那么我们就要采取一些高级的自定义的解决办法。

让元素横穿页面

本例要让一个图片被点击后横穿页面。看看效果。让我们假设有这么一个空白的Html，里面有一个id=”theImage”的图片标记。首先设置它的CSS样式。

#theImage
{
position: relative;
}

为了要让图片运动，我们要更改它的”left”样式属性。不管怎样，为了能影响这个元素的top,left,bottom和right的样式属性，必需先要有position的样式设置。还没弄清相对定位和绝对定位吗……现在，添加我们的jQuery代码。

$(document).ready(function(){
$(”#theImage”).click(function()
{
$(this).animate
({left: “400px”}, 3000);
});
});

这里，我们为图片创建一个点击事件。然后加入”animate”方法。

动画语法结构：.animate({property: “value”}, speed, callbackFunction);

我们使元素3秒钟（3000毫秒）内完成右移400象素。

多重动画

看着，改动一下前面的例子，要让我们的图片向右滑动然后放大图片的宽度。下面的代码对吗？

$(“#theImage”).click(function()
{
$(this).animate
({
left: “400px”,
“300px”
}, 3000);

答案是否定的（至少不完全是）。如果你再重新理解我们的目标，我们是要让图片向右滑动，完成后再将图片的宽度改成300像素。这个代码的表示则是让两个动画同时进行，即图片向右滑动的同时改变了它的宽度。那么，我们如何能够让我们的动画“排队”呢？

$(“#theImage”).click(function()
{
$(this).animate
({
left: “400px”,
}, 3000);
$(this).animate
){
“300px”
}, 3000);

现在我们将这两者分开了，在”left”这个定位属性改变之前”width”属性将不会改变。称其为“动画队列”……或动画链！

来个综合

看看效果

接下来的例子，我们要点击图片后让它向右移动，并将它的不透明度从10%变换到100%。当完成这些效果后，我们还要有一个三秒内淡出的过程。首先，我们要稍微编辑一下CSS文件。

#theImage
{
position: relative;
display: none;
}

为了使元素的”left”样式属性发生变化，元素需要相对定位。我们同样还要将元素的display设为none，以便它在横穿屏幕时我们可以淡入它。现在该jQuery了。

$(document).ready(function(){
$(”#theImage”).css(”opacity”, “.1″);
$(”#theImage”).click(function()
{
$(this).animate
({left: “400px”, opacity: “1″}, 3000, function()
{
$(this).fadeOut(3000);
}
);
});
});

.CSS居然插队！

如果图片移动并淡入之后，我们又要更换它的CSS为……

.css(“border”, “5px solid red”);

很遗憾，你不能得到预期响应。.CSS方法不会等待动画完成而是立即被更换样式。那么你怎样使这个没有效果过程的.CSS方法老老实实地排上队呢？答案是”callback”回调函数（我们已经在以前的示例中运行过）。这里我们复习一下。

$(document).ready(function(){
$(”#theImage”).css(”opacity”, “.1″);
$(”#theImage”).click(function()
{
$(this).animate
({left: “400px”, opacity: “1″}, 3000, function()
{
$(this).css(“border”, “5px solid red”);
$(this).fadeOut(3000);
}
);
});
});

回调函数允许你在效果完成后声明一些功能。它适用于jQuery所有的效果方法。

$(“#someElement”).slideDown(“normal”, function()
{
…这里可以写些代码
});
);

这段代码表示id=”someElement”的元素将在0.4秒内（正常速度）向下完全展开。当动画完成后，回调函数体的代码将会被执行。

我希望这篇文章能帮助你。如果可以，请将文章推荐出去，那么其它的开发者也能学到些东西。