开发者社区> lzhdim> 正文

有关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秒内(正常速度)向下完全展开。当动画完成后,回调函数体的代码将会被执行。

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

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

相关文章
jquery动画 -- 7.会移动的背景,讲解div+css动画原理
  今天课程介绍的是移动的背景,顺便讲解下div+css动画的原理。首先还是先介绍如何制作移动的背景效果。   html代码比较简单,我就全贴出来了,稍后介绍js的实现。 DOCTYPE html> header { ...
719 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
19810 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29188 0
35+ 个 jQuery 实现的动画技术教程
Experimental CSS3 Animations for Image Transitions Item Blur Effect with CSS3 and jQuery Experiments with background-clip: text Lateral On-Sc...
622 0
有关jQuery动画的认识
我知道最近我大多数的文章都在关注jQuery,对于那些不了解或没兴趣的人,我真要劝你们还是花几个小时在它上面吧。jQuery留给我许多值得兴奋的回忆(至少关于WEB的)。我肯定你会从不少人那里听到取笑jQuery的声音……不必担心不同的浏览的修正问题(我很讨厌);不必再去为了只修改一个元素而动用数十行的代码。
797 0
jquery动画 -- 4.升级版遮罩效果的图片走廊--带自动运行效果
  我将上一章中了插件做了个小小的升级,实现了自动运行效果,完整代码大家见demo。    主要的变化点有:把‘下一条’、‘上一条’的click事件抽象到一个函数showNext中。添加setInterval,添加selector元素的hover事件。
976 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22540 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20707 0
+关注
lzhdim
人在20岁以意志力著称,在30岁以智慧取胜,在40岁则靠的是理智的判断。 一个人只有时刻保持幸福快乐的感觉,才会使自己更加热爱生命,热爱生活。只有快乐,愉快的心情,才是创造力和人生动力的源泉;只有不断自己创造快乐,与自己快乐相处的人,才能远离痛苦与烦恼,才能拥有快乐的人生。
522
文章
4
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载