jQueryでウィンドウサイズによって処理を変える

JavaScript

jQueryの超基本的なアニメーションを試してみる

jQueryの基本的なアニメーションを試してみました。やっぱりアニメーションとなるとやっていて面白いですね。色々な動きがとても簡単にできるので便利です。今回はshow、hide、toggle、slideDown、slideUp、slideToggle、fadeIn、fadeOut、fadeToggleを使ってみました。超個人的なメモです。

[ads_center]

show / hide / toggle

showは左上から右下に向かって非表示の要素を表示させていきます。逆にhideは表示されている要素を右下から左上に向かって非表示にしていきます。toggleはshowとhideを交互に切り替えていきます。

showとhide

まずはshowから見ていきます。以下はsample1というクラス名のボタンをクリックするとboxというクラス名がついている要素を表示させ、sample2というクラス名がついているボタンをクリックすると非表示にするコードです。

JavaScript

<script type="text/javascript">
$(function(){
	$('.sample1').click(function(){
		$('.box').show('slow');
	});
	$('.sample2').click(function(){
		$('.box').hide('slow');
	});
});
</script>

HTML

<input type="button" value="表示" class="sample1" />
<input type="button" value="非表示" class="sample2" />
<div class="box"></div>

CSS

.box {
	width: 300px;
	height: 300px;
	background: #ccc;
	display: none;
}

イメージとしてはこんな感じです。

showとhide

showとhideの中に指定してあるslowはアニメーションのスピードです。他にもnormalやfast、またはミリ秒単位で指定できます。

toggle

toggleはshowとhideを交互に切り替えることができます。以下は「表示/非表示」のボタンをクリックする度にdiv.boxが表示、非表示と切り替わります。

JavaScript

<script type="text/javascript">
$(function(){
	$('.sample').click(function(){
		$('.box').toggle('slow');
	});
});
</script>

HTML

<input type="button" value="表示/非表示" class="sample" />
<div class="box"></div>

こんな感じです。

toggle

次はslideDown、slideUp、slideToggleを見てみます。

slideDown / slideUp / slideToggle

基本的には先程のshowとhideをslideDownとslideUpに、toggleをslideToggleに変えただけです。

slideDownとslideUp

クラス名sample1をクリックするとdiv.boxがスライドして表示され、クラス名sample2をクリックするとスライドして非表示になります。

JavaScript

<script type="text/javascript">
$(function(){
    $('.sample1').click(function(){
        $('.box').slideDown('slow');
    });
    $('.sample2').click(function(){
        $('.box').slideUp('slow');
    });
});
</script>

showとhideは右上から左下、左下から右上と表示/非表示されますが、slideDownとslideUpは上から下、下から上へと表示/非表示します。

slideDown-slideUp

slideToggle

先程のtoggleがスライドバージョンになった感じですね。クラス名にsampleがついている表示/非表示ボタンをクリックする度にスライドして表示と非表示が切り替わっていきます。こちらも先程のtoggleをslideToggleに変えただけのコードです。

JavaScript

<script type="text/javascript">
$(function(){
    $('.sample').click(function(){
        $('.box').slideToggle('slow');
    });
});
</script>

これだけで簡単にスライドのアニメーションをつけれることができるのでとても楽ですね。

fadeIn / fadeOut / fadeToggle

最後にfadeIn、fadeOut、fadeToggleを見てみます。こちらも先程のshowとhideをfadeInとfadeOutに、toggleをfadeToggleに変えただけです。

fadeInとfadeOut

fadeInで透明から除々に不透明になって表示されていき、fadeOutで不透明から除々に透明になって非表示になります。

JavaScript

<script type="text/javascript">
$(function(){
    $('.sample1').click(function(){
        $('.box').fadeIn('slow');
    });
    $('.sample2').click(function(){
        $('.box').fadeOut('slow');
    });
});
</script>

なかなか使う機会がありそうな感じです。また、fadeにもfadeToggleというのがありますのでこちらも先程のtoggleと同じくtoggleをfadeToggleに変えただけです。

fadeToggle

クラス名にsampleとついている表示/非表示ボタンをクリックする度に、div.boxがフェードで表示、非表示と切り替わります。

JavaScript

<script type="text/javascript">
$(function(){
    $('.sample').click(function(){
        $('.box').fadeToggle('slow');
    });
});
</script>

とまあこんな感じで超基本的なjQueryのアニメーションをちょっとだけ試してみました。今後は少しずつでも複雑なアニメーションなんかを作れるようになれればいいなと思ってます。

Photoshopで同じ文字をリピートして全体に適用するパターン定義のメモ前のページ

コンテンツの量に合わせて伸び縮みするシンプルでいい感じのjQueryタブパネル「Organic Tabs」次のページ

関連記事

  1. Before and After image script
  2. BookBlock Revised
  3. Rebox

    JavaScript

    レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

    ReboxというjQueryプラグインを使えば、レスポンシブに対応した…

  4. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  5. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  6. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP