Javascriptをはじめ、Ajax、jQueryの著書多数のガイドが、何かと最近騒がれているJa…
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
Javascript関連情報
更新日:2007年03月11日
height(高さ)とwidth(幅)を変化させる動作を組み合わせてみます。同じ変化のさせ方でも、いろいろな指定方法が可能です。

<script type="text/javascript"
src="../../lib/yui/yui_2.2.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript"
src="../../lib/yui/yui_2.2.0/build/animation/animation-min.js"></script>
<script type="text/javascript"
src="../../lib/yui/yui_2.2.0/build/event/event-min.js"></script>
<script type="text/javascript"
src="../../lib/yui/yui_2.2.0/build/dom/dom-min.js"></script>
<script type="text/javascript">
function chgHeight(id){
var myAnim = new YAHOO.util.Anim(
id,
{height:{from:10,to:150}},
0.5,
YAHOO.util.Easing.backBoth
);
myAnim.animate();
}
</script>
<style>
#test1{ width:200px;height:10px;background-color:#ddd;padding:10px }
</style>
<div id="test1">伸びます</div>
<form>
<input type="button"
value="高さが伸びます"
onclick="chgHeight('test1')">
</form>
前回との違いは、前回「width」を指定していた、 第2引数部分のプロパティが「height」に替わっているところです。つまり、たとえば前回なら、{width:{from:10,to:150}} のように書いていた部分が {height:{from:10,to:150}}となっているわけです。 人気Javascriptランキング
Powered by 価格.com
北欧好きが、愛用の北欧モノを見せ合うコミュニティ