不透明度を変える

書式

animeObj = new YAHOO.util.Anim(element, { opacity: { param } })

animeObj : アニメーションオブジェクト
element : ページ上のエレメント
param : 不透明度 (from, to, byで指定)

説明

 不透明度を変えるにはYAHOO.util.Anim()の2番目のパラメータにopacityを指定します。opacityの設定値はfrom, to, byを指定でき、fromが開始不透明度、toが終了不透明度(絶対値)、byが終了不透明度(相対値)となります。指定する場合には最低限toまたはbyで終了不透明度を指定する必要があります。

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript" src="animation.js"></script>
<script type="text/javascript"><!--
function startAnime(){
var boxObj = new YAHOO.util.Anim("box", {
opacity: { from:1, to:0.2} });
boxObj.animate();
}
// --></script>
</head>
<body>
<h1>不透明変化</h1>
<form>
<input type="button" value="開始" onClick="startAnime()">
</form>
<div id="box">
ここの不透明度が変わります。
</div>
</body>
</html>