スポンサーサイト





上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

ノーマルアニメーション

  • Posted by: javascriptmania
  • 2011-05-16 Mon 22:25:36
  • jQuery




jQueryを使うと、手品のようなことが簡単にできます。

下は、クリックするとdiv要素の内容がアニメーションで消えていくコードです。

<html>

<head>

<style type="text/css">
<!--

div {
width: 200px;
height: 200px;
background-color: red;
}

-->
</style>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("jquery", "1");
google.setOnLoadCallback(function() {
$('button').click(function() {
$('div').hide('slow');
});
});

</script>

</head>

<body>

<button>ここをクリック</button><br />

<div>ノーマルアニメーション</div>

</body>

</html>


20110516_12

要素が非表示にされるアニメーション効果は、

$('セレクタ').hide('スピード');

で表すことができます。

スピードは、slow/normal/fastのいずれかを指定します。

逆に、非表示の要素を表示することもできます。

<html>

<head>

<style type="text/css">
<!--

div {
width: 200px;
height: 200px;
background-color: red;
display: none;
}

-->
</style>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("jquery", "1");
google.setOnLoadCallback(function() {
$('button').click(function() {
$('div').show('slow');
});
});

</script>

</head>

<body>

<button>ここをクリック</button><br />

<div>ノーマルアニメーション</div>

</body>

</html>


CSSでは、display: none; と書くことで要素を非表示にすることができますが、これをjQueryで表示するようにしました。

関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/41-95a2ac1e
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。