Web前端基础(16):jQuery基础(三)
程序员文章站
2024-01-05 10:53:46
1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。 1.1 显示动画 方式一： $("div").show(); 无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实 ......
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基础(三)
-
前端开发app用什么框架（学web前端开发需要的基础）
-
零基础学习web前端可以从这4个阶段入手
-
前端基础(二)快速布局神器Flexbox布局_html/css_WEB-ITnose
-
前端基础之初识 HTML_html/css_WEB-ITnose
-
实战电商后端系统（三）—— 以vue-element-admin为基础的前端项目对接后端接口
-
前端新人学习笔记-------html/css/js基础知识点（三） - 不穿裤子的衣服
-
javascript基础知识总结（web前端开发语言）
-
javascript基础知识总结（web前端开发语言）
-
jQuery（三）之 选择器(基础版)