アニメーション：

色をアニメーション

対象Nodeの指定した部分の色を、現在の色から目的の色まで8ステップで推移させる。

Node
Nodeを指定 id値を文字列で指定してもよい
String1
色を変える部位を渡す 半角スペース区切りで複数指定可
  • ○color, backgroundColor, borderColor(borderTopColorなどの特定部分指定も可)
  • ○略語も使用可能：tx = color ・ bg = backgroundColor ・ bc = borderColor ・ bt = borderTopColor ・
    bb = borderBottomColor ・ br = borderRightColor ・ bl = borderLeftColor
String2
推移後の色を渡す HEX = 3桁か6桁 (#の有無は不問) ・ rgba = rgba(r,g,b,a)
Bool
タッチデバイスでの動作 true = 動作する ・ false = 動作しない ／ 省略した場合は false となる
●必須引数 ●オプション引数(省略可能)

記述例

$aniColor($id('aNode'), 'color', 'ff0000', true)
$aniColor('aNode', 'tx bc', '#f00')

動作サンプル

タッチデバイスでは動作しないサンプル。(マウスオーバーに反応)

SAMPLE BOX
HTML : <button type="button" onmouseover="$aniColor($id('sample1'),'backgroundColor','31b1bc')" onmouseout="$aniColor($id('sample1'),'backgroundColor','rgba(#c6dbde,0.3)')">背景色を変更</button> <button type="button" onmouseover="$aniColor($id('sample1'),'txt','#31b1bc')" onmouseout="$aniColor($id('sample1'),'txt','#000')">文字色を変更</button> <button type="button" onmouseover="$aniColor('sample1','bc','31b1bc')" onmouseout="$aniColor('sample1','bc','edf2f3')">ボーダー色を変更</button> <button type="button" onmouseover="$aniColor('sample1','bt bb','#31b1bc')" onmouseout="$aniColor('sample1','bt bb','#edf2f3')">上下のボーダー色を変更</button>   <div id="sample1">SAMPLE BOX</div>

タッチデバイスでも動作するサンプル。(クリック／タップに反応)

SAMPLE BOX
HTML : <button type="button" onclick="$aniColor('sample2','backgroundColor','#31b1bc',true)">背景色を変更</button> <button type="button" onclick="$aniColor('sample2','backgroundColor','rgba(#c6dbde,0.3)',true)">背景色を戻す</button> <button type="button" onclick="$aniColor('sample2','bl br','31b1bc',true)">左右のボーダー色を変更</button> <button type="button" onclick="$aniColor('sample2','bl br','#edf2f3',true)">左右のボーダー色を戻す</button>   <div id="sample2">SAMPLE BOX</div>
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。