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"能够实现这一点。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容