【Javascript】YUI アニメーションopacity,padding...

YUI アニメーションopacity,padding...

---

1: 不透明度opacity
2: パディングpadding
3: パディングトップpaddingTop,パディングレフトpaddingLeft
4: マージンmargin
5: フォントサイズfontSize

前回に引き続き、YUIアニメーションの 使い方を試します。

今回は、YUIアニメーションでCSSのいくつかのプロパティを変化させてみます。 「opacity」、パディング「padding」、マージン「margin」、フォントサイズ「fontSize」などです。

基本的にこれらのCSSプロパティのセットは、YUIの内部では、dom.jsの中にあるYAHOO.util.Dom.setStyle()というCSS値をセットする ためのメソッドが、YAHOO.util.Anim()クラスの中から呼ばれています。

したがって、多くのCSSのプロパティを使えるのですが、ただし、CSSプロパティすべてをこの方法でアニメーションできるというわけではありません。 colorなどは専用のクラスがありますので、また後日説明します。

不透明度opacity

不透明度のコントロールはCSSのopacityを制御するスクリプトです。以前、 「クロスブラウザを制する」シリーズの中で 不透明度set、 不透明度フェイド などを紹介したことが ありますが、今回紹介するのは、YUIのライブラリの中に組み込まれた同様の機能です。

opacityは、ブラウザによって動作が異なりますが、YUIでも内部ではクロスブラウザな処置がなされており、 前回の「width」や「height」と同様に使い方は簡単です。

とりあえず、簡単なサンプルを見てみます。 クリックすると透明化してフェイドアウトします。

このコードは次の通りです。

<script type="text/javascript"
        src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" 
        src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" 
        src="../../build/event/event-min.js"></script>
<script type="text/javascript" 
        src="../../build/dom/dom-min.js"></script>

<script type="text/javascript">
 function chgOpa1(id){
   var myAnim = new YAHOO.util.Anim(
     id, { opacity : { from:1,to:0 } } ,1
   );
   myAnim.animate();
 }
</script>

<style>
#test1{ width:120px;height:120px;background-color:#888}
</style>

<div id="test1"><span style="width:15em">フェイドアウトします</span></div>
<br>
<form>
<input type="button" 
    value="フェイドアウトします" 
    onclick="chgOpa1('test1')">
</form>

これは、CSSのopacityプロパティを不透明「1」～透明「0」までの数値で指定しています。 したがって、半透明にしたければ、たとえば次のように「0.5」などと指定します。

このコードは次の通りです(SCRIPTタグは省略しました)。

<script type="text/javascript">
 function chgOpa2(id){
   var myAnim = new YAHOO.util.Anim(
     id, { opacity : { from:1,to:0.5 } } ,0.8
   );
   myAnim.animate();
 }
</script>

<style>
#test2{ width:120px;height:120px;background-color:orange}
</style>

<div id="test2"><span style="width:15em">0.5までフェイドアウトします</span></div>
<br>
<form>
<input type="button" 
    value="フェイドアウトします" 
    onclick="chgOpa2('test2')">
</form>

次に、これ以外のCSSプロパティをいくつか試してみます。

次ページ