animate()動畫的opacity: 'show'和opacity: 'hide'作用

antzone發表於2017-04-08
動畫IDE

關於animate()方法的基本用法這裡就不多介紹了，具體可以參閱jQuery animate()方法一章節。

關於opacity可以參閱CSS opacity屬性一章節。

有不少的朋友注意到在anmate實現透明度動畫效果的時候會有opacity: 'show'和opacity: 'hide'的使用。

可能他們會有這樣的疑問，那就是為什麼不設定為opacity: '1'和opacity: '0'，下面就此做一下介紹。

特別說明:opacity本身沒有show和hide兩個屬性值，那是經過jQuery封裝的結果。

先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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>

上面的程式碼好像它們之間沒有任何的區別，再來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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"能夠實現這一點。

相關文章