Web前端基础(16):jQuery基础(三)
1. jQuery动画效果
jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
1.1 显示动画
方式一：
$("div").show();
无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。
方式二：
$('div').show(3000);
通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。
方式三：
$("div").show("slow");
参数可以是：
slow 慢：600ms
normal 正常：400ms
fast 快：200ms
和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。
方式四：
//show(毫秒值，回调函数;
$("div").show(5000,function () {
alert("动画执行完毕！");
});
动画执行完后，立即执行回调函数。
总结：
上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。
1.2 隐藏动画
方式参照上面的show()方法的方式。如下：
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});
1.3 显示隐藏案例
1.3.1 实现点击按钮显示盒子，再点击按钮隐藏盒子
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: green;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">隐藏</button>
</body>
<script src="jquery-2.1.0.js"></script> <script type="text/javascript"> //jquery 提供了一些方法 show() hide() 控制元素显示隐藏
var isShow = true;
$('#btn').click(function(){
if(isShow){
$('#box').show('slow',function(){
$(this).text('盒子出来了');
$('#btn').text('显示');
isShow = false;
})
}else{
$('#box').hide(2000,function(){
$(this).text('');
$('#btn').text('隐藏');
isShow = true; })
}
}) </script>
</html>
1.3.2 开关式显示隐藏动画
$('#box').toggle(3000,function(){});
显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。
代码如下：
$('#btn').click(function(){
$('#box').toggle(3000,function(){
$(this).text('盒子出来了');
if ($('#btn').text()=='隐藏') {
$('#btn').text('显示');
}else{
$('#btn').text('隐藏');
}
});
})
1.4 滑入和滑出
1.滑入动画效果：（类似于生活中的卷帘门）
$(selector).slideDown(speed, 回调函数);
下拉动画，显示元素。
注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）
2.滑出动画效果：
$(selector).slideUp(speed, 回调函数);
上拉动画，隐藏元素。
3.滑入滑出切换动画效果：
$(selector).slideToggle(speed, 回调函数);
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
display: none;
background-color: green;
}
</style> <script src="jquery-2.1.0.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.5 淡入淡出动画
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: 0.5;
background-color: red;
}
</style> <script src="jquery-2.1.0.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>
1.6 自定义动画
语法：
$(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: green;
}
</style>
<script src="jquery-2.1.0.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>
1.7 停止动画
$(selector).stop(true, false);
里面的两个参数，有不同的含义。
第一个参数：
true：后续动画不执行。
false：后续动画会执行。
第二个参数：
true：立即执行完成当前动画。
false：立即停止当前动画。
参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。
案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）
<!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-2.1.0.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);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">二级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">三级菜单1</a>
<ul>
<li><a href="javascript:void(0);">三级菜单2</a></li>
<li><a href="javascript:void(0);">三级菜单3</a></li>
<li><a href="javascript:void(0);">三级菜单4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
javascript:void(0); //跟javascript:;效果一样
上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
Web前端基础(16):jQuery基础(三)的更多相关文章
- Web前端国际化之jQuery.i18n.properties
Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...
- 【前端】之jQuery基础知识
jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...
- web前端知识大纲：系列三 html篇
web前端庞大而复杂的知识体系的组成:html.css和 javascript 三.HTML 1.BOM BOM 是 Browser Object Model的缩写,即浏览器对象模型,当一个浏览器页面 ...
- Web前端基础(19):jQuery基础(六)
1. ajax 1.1 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通 ...
- Web前端基础(18):jQuery基础(五)
1. 事件 前面我们介绍完js的事件流的概念之后,相信大家对事件流也有所了解了.那么接下来我们看一下jquery的事件操作. 在说jquery的每个事件之前,我们先来看一下事件对象 . 1.1 事件对 ...
- Web前端基础(15):jQuery基础(二)
1. jQuery选择器 jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素. 1.1 基本选择器 例子如下: <!DOCTYPE html> ...
- Web前端基础(17):jQuery基础(四)
1. jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- Web前端基础(14):jQuery基础(一)
1. jQuery概述 1.1 为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...
- 第四篇 前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
随机推荐
- 这几种JavaScript语法不要轻易使用，容易出事
文章目录 12种不宜使用的JavaScript语法 1. == 2. with 3. eval 4. continue 5. switch 贯穿 6. 单行的块结构 7. ++和-- 8. 位运算符 ...
- Stm32使用串口空闲中断，基于队列来接收不定长、不定时数据
串口持续地接收不定长.不定时的数据,把每一帧数据缓存下来且灵活地利用内存空间,下面提供一种方式供参考.原理是利用串口空闲中断和DMA,每当对方发来一帧完整的数据后,串口接收开始空闲,触发中断,在中断处 ...
- Aery的UE4 C++游戏开发之旅（1）基础对象模型
目录 UObject Actor种类 AActor APawn(可操控单位) AController(控制器) AGameMode(游戏模式) AHUD(HUD) ... Component种类 UA ...
- Spring 常犯的十大错误，（收藏后）永远不要在犯了
1. 错误一:太过关注底层 我们正在解决这个常见错误,是因为 “非我所创” 综合症在软件开发领域很是常见.症状包括经常重写一些常见的代码,很多开发人员都有这种症状. 虽然理解特定库的内部结构及其实现, ...
- 东芝开发板驱动OLED模块显示LOGO图片
前言 在之前的两篇评测文章: 使用系统定时器SysTick实现精确延时微秒和毫秒函数 东芝MCU实现位带操作 介绍了系统SysTick实现精确延时,GPIO的输入输出使用,并实现了位带方式操作GPIO ...
- WPF炫酷UI及动画
偶然看见了一张图,感觉挺好看的,花了点时间将他转化成了我代码仓库的一部分.虽然不难但也费时间.其中除了背景是百度的一张底图,其他所有内容均通过WPF的Path.Line.TextBlock.Borde ...
- VScode - 10个提高工作效率的快捷键
复制行 shift + alt + up / down 移动行 alt + up / down 多选 按住alt + 鼠标单击 删除上个单词 ctrl + Backspace 全部保存 ctrl + ...
- Hackme: 1: Vulnhub Walkthrough
下载链接: https://www.vulnhub.com/entry/hackme-1,330/ 网络扫描探测: ╰─ nmap -p1-65535 -sV -A 10.10.202.131 22/ ...
- SAP IDOC 通过采购订单输出消息生成销售订单
题记: 在网络上看到一篇类似的公众号文章,叫<通过IDoc逐步指导PO&SO集成>,个人觉得整个配置过程中还是少了一些重点配置,也少了说明整个功能的核心逻辑,那么,趁着这个机会,就 ...
- icon图标深入指南
图标是网络上常用的元素. 它们是通用的,可以立即识别,可以非常吸引人,引起注意,并且(如果使用正确)可以提供出色的用户体验. 在网络上实现图标时,我们有很多选择: Icon Spritesheet – ...