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

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

---

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

パディングpadding

CSSのパディングpaddingを制御してみます。

スタイルシートでは 「{padding:10px}」のように指定する上下左右の余白のことですが、YUIのアニメーションでは、 「width」などと同様に、変化させるためのプロパティ「from」や「to」「by」を含むオブジェクトを値として指定します。

ようするに、下記のサンプルとコードのように指定します。

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

<script type="text/javascript">
 function chgCSS1(id){
   var myAnim = new YAHOO.util.Anim(
     id,{ padding : { from:1,to:100,unit:'px' } },0.5
   );
   myAnim.animate();
 }
</script>

<style>
#test3{ width:150px;height:20px;background-color:#ddd}
</style>

<div id="test3"><span style="width:9em">100px分拡がります</span></div>

<form>
<input type="button" 
    value="パディングが100pxへ拡がります" 
    onclick="chgCSS1('test3')">
</form>

パディングトップpaddingTop,パディングレフトpaddingLeft

CSSのパディングpaddingは、{padding-top:10px;padding-left:10px}などのように上(top)下(bottom)左(left)右(right)を それぞれ別に指定することもできます。これも試してみます。

JavaScriptでは、CSSプロパティ名で「padding-top」のようにハイフンで繋がった単語は、ハイフンを除去し、 「paddingTop」のように表記します。除去したハイフンの後ろの文字を大文字にするのでらくだのコブのように見えるので、 キャメルケースやローワーキャメルケースと呼ばれることもある書き方です。 (* ちなみに「JavaScript」という名前の書き方もキャメルケースで、 こちらは先頭文字「J」が大文字なのでアッパーキャメルケースと呼ばれることもあります。)

paddingTopとpaddingLeftのサンプルです。

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

<script type="text/javascript">
 function chgCSSpaddingTop(id){
   var myAnim = new YAHOO.util.Anim(
     id, { paddingTop : { from:1,to:100,unit:'px' }} ,0.5
   );
   myAnim.animate();
 }
 function chgCSSpaddingLeft(id){
   var myAnim = new YAHOO.util.Anim(
     id, { paddingLeft : { from:1,to:200,unit:'px' }} ,0.5
   );
   myAnim.animate();
 }
</script>

<style>
#test4{ width:150px;height:20px;background-color:#ddd}
</style>

<div id="test4"><span style="width:9em">100px分拡がります</span></div>
<br>
<form>
<input type="button" 
    value="paddingTopが100pxへ拡がります" 
    onclick="chgCSSpaddingTop('test4')">
<input type="button" 
    value="paddingLeftが200pxへ拡がります" 
    onclick="chgCSSpaddingLeft('test4')">
</form>

マージンmargin

同様にCSSのマージンmarginを制御してみます。

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

<script type="text/javascript">
 function chgCSS4(id){
   var myAnim = new YAHOO.util.Anim(
     id, { margin : { from:1,to:100,unit:'px' } } ,0.5
   );
   myAnim.animate();
 }
</script>

<style>
#test5{ width:150px;height:20px;background-color:#ddd}
</style>

<div id="test5"><span style="width:9em">100px分拡がります</span></div>
<br>
<form>
<input type="button" 
    value="マージンが100pxへ拡がります" 
    onclick="chgCSS4('test5')">
</form>

フォントサイズfontSize

CSSのフォントサイズfontSizeです。

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

<script type="text/javascript">
 function chgCSS6(id){
   var myAnim = new YAHOO.util.Anim(
     id, { fontSize : { from:1,to:50,unit:'px' } } ,0.5
   );
   myAnim.animate();
 }
</script>

<style>
#test6{ width:10em;height:50px;background-color:#ddd}
</style>

<div id="test6"><span style="width:10em">50pxへ拡大します</span></div>
<br>
<form>
<input type="button" 
    value="フォントサイズが50pxへ拡大します" 
    onclick="chgCSS6('test6')">
</form>

前ページ