FC2ブログ

jQueryで何か動かすものを作ってみたが・・・

jQueryの animate 関数を使って何か動くページを作ることにした。
とりあえず、<div>でボックスを作ってそれを動かすことにする。

append関数などを使って、jQueryでガシガシとDOMを構築しようと思ったが、思ったイメージを実現するのに時間がかかり断念。
ゼロから作るのだから、細かく分けて少しずつ実現していこう。
ということで、ボックスはHTMLに直接書いて、属性はCSSに直接書いた。

書いたJavaScriptコードはこれだけ。
(function($) {

var animetest = {
  movebox: function(){
  $(this).animate({left: "400px"});
  }
}

$(document).ready(function() {
  $("div.box1").click(animetest.movebox);
});

})(jQuery);

わざわざ animetest.movebox を外部で定義しなくても、これだけなら
$("div.box1").click(function(){$(this).animate({left: "400px"});});
でいいんだけど、これから機能を追加していく予定なので。

Firebugを使ってテストしてみたら見事にハマった。
animate関数を使うところにブレイクポイントをセットして、jQueryの中へステップインするとアニメーションされない。
そして一時的にCPU使用率が100%になって固まる。
実行ステップを見てると、何となく変な動きをしている。
jQueryの中へステップインしなければきちんとアニメーションされる。
ネットで調べてみたところ、Firebugのバグっぽい?よくわからないので放置。

今日調べてわかったCSSのテクニック
・text-align: center; のように、ブロック要素を中央揃えで表示する方法
margin-left: auto;
margin-right: auto;
をCSSで設定する。
ただしIE6では中央揃えが行われない場合がある。
IE6対策方法もあったけど、CSSが複雑になるので多分自分は使わない。
スポンサーサイト



コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター