有关jQuery动画的认识-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

有关jQuery动画的认识

简介: 我知道最近我大多数的文章都在关注jQuery,对于那些不了解或没兴趣的人,我真要劝你们还是花几个小时在它上面吧。jQuery留给我许多值得兴奋的回忆(至少关于WEB的)。我肯定你会从不少人那里听到取笑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”,
width: “300px”
}, 3000);

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

$(“#theImage”).click(function()
{
$(this).animate
({
left: “400px”,
}, 3000);
$(this).animate
){
width: “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秒内(正常速度)向下完全展开。当动画完成后,回调函数体的代码将会被执行。

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章