animate()动画的opacity: ‘show’和opacity: ‘hide’作用
分类：实例代码
关于animate()方法的基本用法这里就不多介绍了，具体可以参阅jQuery animate()方法一章节。
关于opacity可以参阅CSS opacity属性一章节。
有不少的朋友注意到在anmate实现透明度动画效果的时候会有opacity: 'show'和opacity: 'hide'的使用。
可能他们会有这样的疑问，那就是为什么不设置为opacity: '1'和opacity: '0'，下面就此做一下介绍。
特别说明:opacity本身没有show和hide两个属性值，那是经过jQuery封装的结果。
先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
div{
width:200px;
height:150px;
background:green;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#one").click(function () {
$("div").animate({
opacity:"0"
});
})
$("#two").click(function () {
$("div").animate({
opacity: "hide"
});
})
});
</script>
</head>
<body>
<input type="button" id="one" value="方式一"/>
<input type="button" id="two" value="方式二"/>
<div></div>
</body>
</html>
上面的代码好像它们之间没有任何的区别，再来看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
div{
width:200px;
height:150px;
background:green;
display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#one").click(function () {
$("div").animate({
opacity:"1"
});
})
$("#two").click(function () {
$("div").animate({
opacity: "show"
});
})
});
</script>
</head>
<body>
<input type="button" id="one" value="方式一"/>
<input type="button" id="two" value="方式二"/>
<div></div>
</body>
</html>
在上面的代码中，点击第二个按钮可以将div设置为显示状态，点击第一个不可以。
大家体会到一点什么没有使用正常意义上的opacity只是设置元素的透明度，并不能够设置元素的display:none或者display:block。
但是opacity:"show"或者opacity:"hide"能够实现这一点。