讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
概述
在jQuery框架中可便捷地以动画形式隐藏和显示以及切换元素，常用方式有如下三种：默认方式、滑动方式、淡入淡出方式。
默认方式隐藏和显示以及切换元素
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
滑动方式隐藏和显示以及切换元素
slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
淡入淡出方式隐藏和显示以及切换元素
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])
参数详解
- speed：该参数表示动画的速度。可使用其三个预定义的值slow、normal、fast，也可使用具体数值(单位：毫秒)
- easing：该参数用于指定切换效果，默认值swing也可使用linear。swing表示动画执行时效果是先慢后快再慢，linear表示匀速执行动画。
- fn：该参数表示动画执行结束时的回调函数。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery元素的隐藏、显示和切换及其动画效果</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div {
width: 200px;
height: 200px;
background: yellowgreen;
border: #000 1px solid;
float: left;
font-size: 20px;
font-family: Roman;
}
</style>
<script type="text/javascript">
$(function() {
//默认方式隐藏和显示以及切换元素
$("#firstButton").click(function() {
$("#divID").hide("slow", "swing", function() {
console.log("hide");
});
});
$("#secondButton").click(function() {
$("#divID").show("slow", "swing", function() {
console.log("show");
});
});
$("#thirdButton").click(function() {
$("#divID").toggle("slow", "swing", function() {
console.log("toggle");
});
});
//滑动方式隐藏和显示以及切换元素
$("#fourthButton").click(function() {
$("#divID").slideUp("slow", "swing", function() {
console.log("hide");
});
});
$("#fifthButton").click(function() {
$("#divID").slideDown("slow", "swing", function() {
console.log("show");
});
});
$("#sixthButton").click(function() {
$("#divID").slideToggle("slow", "swing", function() {
console.log("toggle");
});
});
//淡入淡出方式隐藏和显示以及切换元素
$("#seventhButton").click(function() {
$("#divID").fadeOut("slow", "swing", function() {
console.log("hide");
});
});
$("#eighthButton").click(function() {
$("#divID").fadeIn("slow", "swing", function() {
console.log("show");
});
});
$("#ninthButton").click(function() {
$("#divID").fadeToggle("slow", "swing", function() {
console.log("toggle");
});
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<input type="button" value="以默认方式隐藏元素" id="firstButton" />
<input type="button" value="以默认方式显示元素" id="secondButton" />
<input type="button" value="以默认方式切换元素" id="thirdButton" />
<br /><br />
<input type="button" value="以滑动方式隐藏元素" id="fourthButton" />
<input type="button" value="以滑动方式显示元素" id="fifthButton" />
<input type="button" value="以滑动方式切换元素" id="sixthButton" />
<br /><br />
<input type="button" value="以淡入淡出方式隐藏元素" id="seventhButton" />
<input type="button" value="以淡入淡出方式显示元素" id="eighthButton" />
<input type="button" value="以淡入淡出方式切换元素" id="ninthButton" />
<br /><br />
<div id="divID">
This is div
</div>
</body>
</html>
