yuiで不透明度を変化させるには、以下の4つのライブラリを読み込ませておきます。
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="animation.js" type="text/javascript"></script>
不透明度の処理もYAHOO.util.Anim()を使います。オプションのパラメータにopacity: { to:0.2 }のようにopacityを使って不透明度を指定します。指定できる値は0〜1までの小数値になります。0が完全な透明で、1.0が完全な不透明になります。以下のサンプルでは不透明度を20%にします。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiサンプル</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="animation.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function setOpac()
{
boxObj = new YAHOO.util.Anim("box", {
opacity:{ to:0.1 }},2 );
boxObj.animate();
}
// --></script>
</head>
<body>
<h1>yuiサンプル</h1>
<form>
<input type="button" value="不透明度変更" onClick="setOpac()">
</form>
<div id="box">Yahooサンプル</div>
</body>
</html>
不透明度を10%から70%まで変化させたい場合にはfromを指定します。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiサンプル</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="animation.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function setOpac()
{
boxObj = new YAHOO.util.Anim("box", { opacity:{
from:0, to:1 }},2 );
boxObj.animate();
}
// --></script>
</head>
<body>
<h1>yuiサンプル</h1>
<form>
<input type="button" value="不透明度変更" onClick="setOpac()">
</form>
<div id="box">Yahooサンプル</div>
</body>
</html>
widthやheightなど他のオプションと同時に指定することもできます。以下のサンプルはサイズを大きくしつつ、透明に変化させていくものです。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiサンプル</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="animation.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function setOpac()
{
boxObj = new YAHOO.util.Anim("box", { width: {from:200, to: 600}, height:{from:150,to:400}, opacity:{ from:1, to:0.1 }},2 );
boxObj.animate();
}
// --></script>
</head>
<body>
<h1>yuiサンプル</h1>
<form>
<input type="button" value="サイズ＆不透明度を同時に変更" onClick="setOpac()">
</form>
<div id="box">Yahooサンプル</div>
</body>
</html>
[
アニメーションの開始、終了時に処理を行う]
[
目次へ]
(2006.2.20)