Jquery动画效果
V哥官网:http://www.vgxit.com
本博客对应视频教程:http://www.vgxit.com/course/19
1,概述
jquery提供了三种方式来显示和隐藏元素:
1,默认显示和隐藏方式
2,滑动显示和隐藏方式
3,淡入淡出显示和隐藏方式
下面我们分别来学习者三种方式。
2,默认的显示隐藏方式
默认的显示和隐藏对应了三个方法:
1,show([speed, [easing], [fn]]):显示
2,hide([speed, [easing], [fn]]):隐藏
3,toggle([speed, [easing], [fn]]):切换显示和隐藏,也就是如果当前是显示的就隐藏,如果是隐藏的就显示
同学们可能看到了这三个方法,分别都有三个相同的参数,这三个相同的参数都是非必须的。下面我们分别对这三个参数做一下介绍:
1,speed:动画的速度,可以是字符串,分别是slow,normal和fast。分别代表缓慢,正常,快速。也可以用一个数字类型的数据来指定三种预定速度的毫秒值。
2,easing:用来指定切换的效果,默认是“swing”,也可以使"linear"。swing表示的是执行动画的时候先慢后快。linear表示指定动画的时候速度是匀速。
3,fn:表示动画完成之后的回调函数。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>默认显示和隐藏的效果</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function hideDiv() {
var mydiv = $("#mydiv");
mydiv.hide("slow", "linear", function () {
alert("隐藏div");
});
}
function showDiv() {
var mydiv = $("#mydiv");
mydiv.show("slow", "swing", function () {
alert("显示div");
});
}
function toggleFn() {
var mydiv = $("#mydiv");
mydiv.toggle(3000);
}
</script>
</head>
<body>
<div style="width: 800px; height: 600px; background: yellow;" id="mydiv">测试div</div>
<div style="margin-top: 10px;">
<button onclick="hideDiv();">隐藏div</button>
<button onclick="showDiv();">显示div</button>
<button onclick="toggleFn()">显示或者隐藏div切换</button>
</div>
</body>
</html>
3,滑动显示和隐藏的方式:
1,slideDown([speed, [easing], [fn]]):显示
2,slideUp([speed, [easing], [fn]]):隐藏
3,slideToggle([speed, [easing], [fn]]):切换显示和隐藏,也就是如果当前是显示就隐藏,如果是隐藏就显示。
4,淡入淡出显示和隐藏的方式:
1,fadeIn([speed, [easing], [fn]]):显示
2,fadeOut([speed, [easing], [fn]]):隐藏
3,fadeToggle([speed, [easing], [fn]]):切换显示和隐藏,也就是如果当前是显示就隐藏,如果是隐藏就显示