淡入淡出效果簡單程式碼例項

antzone發表於2018-07-03

現在效果講究過渡與動態效果，比瞬間完成的效果要人性化很多。

下面是一段簡單的程式碼例項，演示了淡入淡出效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css">
#thediv{
  width:100px;
  height:100px;
  background-color:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
  $("#outbt").click(function(){
    $("#thediv").fadeOut();
  })
  $("#inbt").click(function(){
    $("#thediv").fadeIn();
  })
})
</script>
</head>
<body>
<div id="thediv"></div>
<input type="button" value="點選淡出" id="outbt"/>
<input type="button" value="點選淡入" id="inbt"/>
</body>
</html>

程式碼實現了我們的要求，程式碼比較簡單這裡就不做介紹。

相關閱讀：

（1）.click事件參閱jQuery click事件一章節。

（2）.fadeOut方法參閱jQuery fadeOut()一章節。 

（3）.fadeIn方法參閱jQuery fadeIn()一章節。

相關文章