本文最初发表于博客园,并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端。

以下是正文。

前言

jQuery提供的一组网页中常见的动画效果,这些动画是标准的、有规律的效果;同时还提供给我们了自定义动画的功能。

显示动画

方式一:

	$("div").show();

解释:无参数,表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

方式二:

	$("div").show(2000);

解释:通过控制元素的宽高、透明度、display属性,逐渐显示,2秒后显示完毕。

效果如下:

方式三:

	$("div").show("slow");

参数可以是:

  • slow 慢:600ms

  • normal 正常:400ms

  • fast 快:200ms

解释:和方式二类似,也是通过控制元素的宽高、透明度、display属性,逐渐显示。

方式四:

    //show(毫秒值,回调函数;
$("div").show(5000,function () {
alert("动画执行完毕!");
});

解释:动画执行完后,立即执行回调函数。

总结:

上面的四种方式几乎一致:参数可以有两个,第一个是动画的执行时长,第二个是动画结束后执行的回调函数。

隐藏动画

方式参照上面的show()方法的方式。如下:

	$(selector).hide();

	$(selector).hide(1000); 

	$(selector).hide("slow");

	$(selector).hide(1000, function(){});

显示和隐藏的来回切换:

显示和隐藏的来回切换采用的是toggle()方法:就是先执行show(),再执行hide()。

同样是四种方式:

$(selector).toggle();

滑入和滑出

1、滑入动画效果:(类似于生活中的卷帘门)

	$(selector).slideDown(speed, 回调函数);

解释:下拉动画,显示元素。

注意:省略参数或者传入不合法的字符串,那么则使用默认值:400毫秒(同样适用于fadeIn/slideDown/slideUp)

2 滑出动画效果:

	$(selector).slideUp(speed, 回调函数);

解释:上拉动画,隐藏元素。

3、滑入滑出切换动画效果:

	$(selector).slideToggle(speed, 回调函数);

参数解释同show()方法。

举例:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
display: none;
background-color: pink;
}
</style> <script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () { //滑入动画: slideDown(毫秒值,回调函数[显示完毕执行什么]);
$("div").slideDown(2000, function () {
alert("动画执行完毕!");
});
}) //滑出动画
$("button:eq(1)").click(function () { //滑出动画:slideUp(毫秒值,回调函数[显示完毕后执行什么]);
$("div").slideUp(2000, function () {
alert("动画执行完毕!");
});
}) $("button:eq(2)").click(function () {
//滑入滑出切换(同样有四种用法)
$("div").slideToggle(1000);
}) })
</script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div> </body>
</html>

淡入淡出动画

1、淡入动画效果:

	$(selector).fadeIn(speed, callback);

作用:让元素以淡淡的进入视线的方式展示出来。

2、淡出动画效果:

	$(selector).fadeOut(1000);

作用:让元素以渐渐消失的方式隐藏起来

3、淡入淡出切换动画效果:

	$(selector).fadeToggle('fast', callback);

作用:通过改变透明度,切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

代码举例:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
display: none;
/*opacity: 1;*/
background-color: pink;
}
</style> <script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () {
// //淡入动画用法1: fadeIn(); 不加参数
$("div").fadeIn(); // //淡入动画用法2: fadeIn(2000); 毫秒值
// $("div").fadeIn(2000);
// //通过控制 透明度和display //淡入动画用法3: fadeIn(字符串); slow慢:600ms normal正常:400ms fast快:200ms
// $("div").fadeIn("slow");
// $("div").fadeIn("fast");
// $("div").fadeIn("normal"); //淡入动画用法4: fadeIn(毫秒值,回调函数[显示完毕执行什么]);
// $("div").fadeIn(5000,function () {
// alert("动画执行完毕!");
// });
}) //滑出动画
$("button:eq(1)").click(function () {
// //滑出动画用法1: fadeOut(); 不加参数
// $("div").fadeOut(); // //滑出动画用法2: fadeOut(2000); 毫秒值
// $("div").fadeOut(2000); //通过这个方法实现的:display: none;
// //通过控制 透明度和display //滑出动画用法3: fadeOut(字符串); slow慢:600ms normal正常:400ms fast快:200ms
// $("div").fadeOut("slow");
// $("div").fadeOut("fast");
// $("div").fadeOut("normal"); //滑出动画用法1: fadeOut(毫秒值,回调函数[显示完毕执行什么]);
// $("div").fadeOut(2000,function () {
// alert("动画执行完毕!");
// });
}) $("button:eq(2)").click(function () {
//滑入滑出切换
//同样有四种用法
$("div").fadeToggle(1000);
}) $("button:eq(3)").click(function () {
//改透明度
//同样有四种用法
$("div").fadeTo(1000, 0.5, function () {
alert(1);
});
})
})
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>改透明度为0.5</button>
<div></div> </body>
</html>

自定义动画

	$(selector).animate({params}, speed, callback);

作用:执行一组CSS属性的自定义动画。

  • 第一个参数表示:要执行动画的CSS属性(必选)

  • 第二个参数表示:执行动画时长(可选)

  • 第三个参数表示:动画执行完后,立即执行的回调函数(可选)

代码举例:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
}; //自定义动画
$("div").animate(json, 1000, function () {
$("div").animate(json2, 1000, function () {
alert("动画执行完毕!");
});
}); })
})
</script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>

停止动画

	$(selector).stop(true, false);

里面的两个参数,有不同的含义。

第一个参数:

  • true:后续动画不执行。

  • false:后续动画会执行。

第二个参数:

  • true:立即执行完成当前动画。

  • false:立即停止当前动画。

PS:参数如果都不写,默认两个都是false。实际工作中,直接写stop()用的多。

效果演示:

当第二个参数为true时,效果如下:

当第二个参数为false时,效果如下:

这个后续动画我们要好好理解,来看个例子。

案例:鼠标悬停时,弹出下拉菜单(下拉时带动画)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
} .wrap li {
background-color: green;
} .wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
} .wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
} .wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//入口函数
$(document).ready(function () {
//需求:鼠标放入一级li中,让他里面的ul显示。移开隐藏。
var jqli = $(".wrap>ul>li"); //绑定事件
jqli.mouseenter(function () {
$(this).children("ul").stop().slideDown(1000);
}); //绑定事件(移开隐藏)
jqli.mouseleave(function () {
$(this).children("ul").stop().slideUp(1000);
});
});
</script> </head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

效果如下:

上方代码中,关键的地方在于,用了stop函数,再执行动画前,先停掉之前的动画。

如果去掉stop()函数,效果如下:(不是我们期望的效果)

stop方法的总结

当调用stop()方法后,队列里面的下一个动画将会立即开始。

但是,如果参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且永远也不会执行。

如果参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,那么回调函数也会立即执行。

注意:如果元素动画还没有执行完,此时调用sotp()方法,那么动画将会停止。并且动画没有执行完成,那么回调函数也不会被执行。

我的公众号

想学习代码之外的软技能?不妨关注我的微信公众号:生命团队(id:vitateam)。

扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:

jQuery动画详解的更多相关文章

  1. JQuery动画详解(四)

    一:基本动画show()显示隐藏的匹配元素.这个就是 'show( speed, [callback] )' 无动画的版本.如果选择的元素是可见的,这个方法将不会改变任何东西.无论这个元素是通过hid ...

  2. [转] ReactNative Animated动画详解

    http://web.jobbole.com/84962/     首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 - 首页 所有文章 ...

  3. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  4. jQuery.validator 详解二

    前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...

  5. jQuery.validator 详解

    jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...

  6. [转]Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法

    转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...

  7. jquery方法详解

    jquery方法详解 http://www.365mini.com/doc

  8. Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串

    Jquery 选择器 详解   在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...

  9. [转]超级强大的SVG SMIL animation动画详解

    超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...

随机推荐

  1. 深度解剖dubbo源码

    -----------学习dubbo源码,能给你带来什么好处?----------- 1.提升SOA的微服务架构设计能力   通过读dubbo源码是一条非常不错的通往SOA架构设计之路,毕竟SOA的服 ...

  2. CCS入门基础

      1.CSS概念 全称为Cascading Style Sheets(层叠样式表),支持专有的文件 - 扩展名为".css" 作用:将HTML的结构(HTML标签即html)与样 ...

  3. 把玩爬虫框架Gecco

    如果你现在接到一个任务,获取某某行业下的分类. 作为一个非该领域专家,没有深厚的运营经验功底,要提供一套摆的上台面且让人信服的行业分类,恐怕不那么简单. 找不到专家没有关系,我们可以爬虫.把那些专家的 ...

  4. Machine Learning - week 4 - 编程练习

    = X' * (h - y) LrCostFunction 与上一周的有什么不同? 与 week3 的 costFunctionReg 是一样的.Week3 中参考答案没有排除 theta 第一行,但 ...

  5. 学习笔记-使用cmd命令行创建nodejs项目

    使用cmd命令行创建nodejs项目 1)在DOS下cd 进入到你想要创建项目的路径. 2)mkdir sing (创建一个sing文件夹) 3)cd sing  4) npm init (初始化工程 ...

  6. Codeforces 626C Block Towers(二分)

    C. Block Towers time limit per test:2 seconds memory limit per test:256 megabytes input:standard inp ...

  7. C#的LINQ

    在过去如果我们如果需要去查询某些集合或者数组里面的某些元素,我们需要写出大量的带有筛选的遍历集合的代码,但是有了Linq之后,我们就不用写出那些冗余麻烦的遍历代码,只需要关注其中的筛选,排列的函数就可 ...

  8. 原生JavaScript常用的DOM操作

    之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或 ...

  9. webpack运行常见错误归纳

    今天在运行项目的时候,又遇到坑了,在公司运行的好好的项目,到我自己电脑上就报错,提示跨域,想了好久都不明白为啥,webpack配置文件里的ip地址我也改成与本地ip对应的,百思不得其解,在寻求别人帮助 ...

  10. Linux的ls命令在Windows中的应用

    Linux的ls命令在Windows中的应用 注:ls是Linux中的命令.其作用是列出当前目录下的文件与文件夹.效果等同于Wndows中的dir指令. 如下图 下面是详细步骤 步骤一.在桌面新建一个 ...