一、介紹：
1. 使用slim版本無法使用淡入淡出，例如：https://code.jquery.com/jquery-3.4.1.slim.js
2. 語法如下：
fadeIn() 透明淡入
fadeOut() 透明淡出
fadeTo() 調整透明度，slow 慢速 fast 快速
3. Math.random() 數值隨機
二、程式範本：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淡入淡出特效</title>
</head>
<!--https://code.jquery.com/jquery-3.4.1.slim.js無法使用淡入淡出-->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#text1').hide();
$('#t1').click(function(){
$('#text1').fadeIn(1000);
return false;
});
$('#t2').click(function(){
$('#text1').fadeOut(1000);
return false;
});
$('#t3').click(function(){
$('#text1').fadeToggle(1000);
return false;
});
$('#t4').click(function(){
//slow 慢 fast 快
$('#text1').fadeTo("slow",Math.random());//Math.random()數值隨機
return false;
});
});
</script>
<body>
<div id="text1" >
淡入與淡出建立選取元素的透明度動畫。<br>
fadeIn() 透明淡入<br>
fadeOut() 透明淡出<br>
fadeTo() 調整透明度
</div>
<a href="#" id="t1">淡入特效</a>
<a href="#" id="t2">淡出特效</a>
<a href="#" id="t3">淡入與淡出特效</a>
<a href="#" id="t4">調整透明度與指定速度的特效</a>
</body>
</html>
留言列表
程式語法 (11)
