【jQuery入門】よく使うアニメーション系のメソッド8選

前回、前々回とメソッドという仕組みについて学びましたが、今回はメソッド関連の最終記事です。

使ってみると割と簡単ですけど、使う機会が多いアニメーション系メソッドです。では早速見ていきましょう。

アニメーション系のメソッドとは？

処理を行う際に、アニメーションをつけることができます。

例えば、以下の場合、#btnの要素をクリックすると、ID名text要素が非表示になります。

jQuery

$('#btn').on('click', function(){
	$('#text').hide();
});

アニメーションの種類

アニメーション系のメソッドの種類は以下の通りです。

.show()

表示状態の要素を表示します。

以下の場合、divをクリックすると、隠れているclass属性「one」の要素が0.5秒（500ミリ秒）かけて表示されます。

HTML

<div>
  <ul>
    <li class="one">ロック</li>
    <li>ジャズ</li>
    <li>ファンク</li>
    <li>歌謡曲</li>
  </ul>
</div>

CSS

.one{
  display: none;
}

jQuery

$(function(){
 $('div').on('click', function(){
   $('.one').show(500);
  });
});

.hide()

表示状態の要素を非表示にします。

以下の場合、divをクリックすると、class属性「one」の要素が0.5秒（500ミリ秒）かけて隠れます。

HTML

<div>
  <ul>
    <li class="one">ロック</li>
    <li>ジャズ</li>
    <li>ファンク</li>
    <li>歌謡曲</li>
  </ul>
</div>

jQuery

$(function(){
 $('div').on('click', function(){
   $('.one').hide(500);
  });
});

.toggle()

表示状態の要素は非表示に、非表示状態の要素は表示します。以下の場合、divをクリックすると、class属性「one」の要素が表示状態であれば0.5秒（500ミリ秒）かけて隠れます。

反対に、非表示状態であれば、divをクリックすると0.5秒（500ミリ秒）かけて表示されます。

HTML

<div>
  <ul>
    <li class="one">ロック</li>
    <li>ジャズ</li>
    <li>ファンク</li>
    <li>歌謡曲</li>
  </ul>
</div>

jQuery

$(function(){
 $('div').on('click', function(){
   $('.one').toggle(500);
  });
});

.fadeIn()

要素をフェードインで表示します。

以下の場合、divをクリックすると、隠れているclass属性「one」の要素が0.5秒（500ミリ秒）かけてフェードインで表示されます。

HTML

<div>
  <ul>
    <li class="one">ロック</li>
    <li>ジャズ</li>
    <li>ファンク</li>
    <li>歌謡曲</li>
  </ul>
</div>

CSS

.one{
  display: none;
}

jQuery

$(function(){
 $('div').on('click', function(){
   $('.one').fadeIn(500);
  });
});

.fadeOut()

要素をフェードアウトで非表示にします。

以下の場合、divをクリックすると、class属性「one」の要素が0.5秒（500ミリ秒）かけてフェードアウトで隠れます。

HTML

<div>
  <ul>
    <li class="one">ロック</li>
    <li>ジャズ</li>
    <li>ファンク</li>
    <li>歌謡曲</li>
  </ul>
</div>

jQuery

$(function(){
 $('div').on('click', function(){
   $('.one').fadeOut(500);
  });
});

.slideDown()

要素を縦方向に拡大しながら表示します。

以下の場合、divをクリックすると、隠れているclass属性「one」の要素が0.5秒（500ミリ秒）かけて拡大表示されます。

HTML

<div>
  <ul>
    <li class="one">ロック</li>
    <li>ジャズ</li>
    <li>ファンク</li>
    <li>歌謡曲</li>
  </ul>
</div>

CSS

.one{
  display: none;
}

jQuery

$(function(){
 $('div').on('click', function(){
   $('.one').slideDown(500);
  });
});

.slideUp()

要素を縦方向に縮小しながら非表示にします。

以下の場合、divをクリックすると、class属性「one」の要素が0.5秒（500ミリ秒）かけて縮小しながら隠れます。

HTML

<div>
  <ul>
    <li class="one">ロック</li>
    <li>ジャズ</li>
    <li>ファンク</li>
    <li>歌謡曲</li>
  </ul>
</div>

jQuery

$(function(){
 $('div').on('click', function(){
   $('.one').slideUp(500);
  });
});

.animate()

指定したCSSプロパティの値を変化させます。

以下の場合、divをクリックするたびに、class属性「one」の要素が10pxづつ右に移動します。

HTML

<div>
  <ul>
    <li class="one">ロック</li>
    <li>ジャズ</li>
    <li>ファンク</li>
    <li>歌謡曲</li>
  </ul>
</div>

CSS

.one{
   position: relative;
}

jQuery

$(function(){
 $('div').on('click', function(){
   $('.one').animate({left:'+=10px'});
  });
});

まとめ

メソッドを使いこなすと、本当にjQueryが楽しくなってくるはずです。もちろん一度で理解しようと思わずに、実際に手を動かしてメソッドを使ってみてください。

jQuery関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。