jQuery动画之显示隐藏动画
1. 显示动画
以下面一个代码示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery显示动画</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ff6700;
display: none;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
显示动画的方式有三种方式
方式一：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(".box").show();
</script>
解释：使用show()， 不带有参数， 表示让指定的元素直接显示出来。
其实这个方法的底层就是通过display：block;实现。
方式二：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//在3秒内逐渐显示
$(".box").show(3000);
</script>
解释： 使用show(数值)， 表示在一定时间之内， 逐渐显示出来。
这种方法是通过控制元素的宽高、透明度、display属性来说实现的。
方式三：
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function () { $(".box").show("slow"); }) </script>
解释： 通过参数， 使用show(), 参数可以为：
(1) slow(慢)： 600ms;
(2) normal(普通)： 400ms；
(3) fast(快)： 200ms;
通过这种方式调用show()， 也是空过控制元素的宽高、透明度、display属性来实现的。
补充：在动画执行完毕后， 执行另外的程序
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$(".box").show("faster", function () {
alert("动画执行完毕")
});
})
</script>
解释： 这种方式， 是在show()中加入了一个函数， 当show()执行完毕后， 就会执行此函数。
可以在方式一、方式二、方式三中都可以加入此函数。
2. 隐藏动画
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuer隐藏动画</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ff6700;
display: block;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
隐藏动画 和 显示动画的方式相同， 都具有三种方式， 区别在于隐藏动画使用hide()方法。
方式一：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".box").hide();
})
</script>
解释： 这种方式是通过hide()直接进行隐藏，hide()中没有任何参数。
方式的底层是通过 display: none; 实现
方式二：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".box").hide(3000);
})
</script>
解释：使用 hide(数值) ， 表示在一定时间内， 逐渐隐藏。
这种方法是通过控制元素的宽高、透明度、display属性来说实现的。
方式三：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".box").hide("normal");
})
</script>
解释： 通过参数， 使用 hide(), 参数可以为：
(1) slow(慢)： 600ms;
(2) normal(普通)： 400ms；
(3) fast(快)： 200ms;
通过这种方式调用 hide()， 也是空过控制元素的宽高、透明度、display属性来实现的。
补充：在动画执行完毕后， 执行另外的程序
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$(".box").hide("faster", function () {
alert("动画执行完毕")
});
})
</script>
解释： 这种方式， 是在 hide() 中加入了一个函数， 当 hide() 执行完毕后， 就会执行此函数。
可以在方式一、方式二、方式三中都可以加入此函数。
3. 显示隐藏示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮控制图片显示隐藏</title>
<style>
#box{
width: 200px;
height: 200px;
display: none;
background-color: #ff6700;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">显示</button>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
var is_show = true;
$("#btn").click(function () {
if (is_show){
$("#box").show(3000, function () {
$(this).text("盒子出来");
$("#btn").text("隐藏");
is_show = false;
})
}else{
$("#box").hide(3000, function () {
$(this).text("");
$("#btn").text("显示");
is_show = true;
})
}
})
})
</script>
</body>
</html>
4. 便捷方式实现显示隐藏动画
可以功过 toggle() 便捷的实现显示和隐藏的来回切换， 语法格式如下：
$("#box").toggle(3000, function () {
})
但是这种方法有一个不足之处， 那就是在执行时， 会先执行show()， 然后再执行hide()
使用 toggle() 的示例代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮控制图片显示隐藏</title>
<style>
#box{
width: 200px;
height: 200px;
display: none;
background-color: #ff6700;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">显示</button>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$("#box").toggle(3000, function () {
$(this).text("盒子显示");
if($("#btn").text() == "隐藏"){
$("#btn").text("显示");
}else{
$("#btn").text("隐藏");
}
})
})
})
</script>
</body>
</html>
