JavaScript マスク処理

2009/03/10

ASからJSへの移植のときに、どうしよう?と考えたのがマスク処理。

結果からいうと、
マスクのcssにover-frow:hiddenとする
マスクされる方にwidthを設定
マスクのwidthをかえてアニメーション

とすると、マスクのアニメーションができました。もし、縦にアニメーションしたい場合は、
width→heightとすればすぐできると思います。

→サンプルです。

ソース


$(function(){
  $('#start').click(function(){
    $('#bodytext')
      .stop()
      .css('width', '0px')
      .animate({width: '400px'}, 0.5 * 1000, 'easeInQuad');
  });
});

LINEで送る
Pocket

自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

LINEスタンプ作りました!
毎日使える。とぼけたウサギ。LINEスタンプ販売中! 毎日使える。とぼけたウサギ

ページトップへ戻る