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. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  2. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  3. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

  4. CSS Emoticons
  5. Holmes

    JavaScript

    ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

    Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリで…

  6. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP