jQueryのホバーエフェクト

今回は各ボタンにさまざまなホバーエフェクトをjQueryで実装します。

ホバーエフェクトのHTML

<div class="page-main" role="main">

    <div id="buttons1">
        <h2>BUTTONS1</h2>
        <div class="inner clearfix">
            <button>Albatross</button>
            <button>Bishop</button>
            <button>Canary</button>
            <button>Duck</button>
            <button>Eagle</button>
            <button>Falcon</button>
            <button>Goose</button>
            <button>Hawk</button>
            <button>Ibis<span class="bg"><span>Ibis</span></span></button>
            <button>Jaeger<span class="bg"><span>Jaeger</span></span></button>
            <button>Kingfisher<span class="bg"><span>Kingfisher</span></span></button>
            <button>Lark<span class="bg"><span>Lark</span></span></button>
        </div>
    </div>

</div>

ボタンの要素全体が.page-mainクラスで囲まれ、その子要素として各ボタンを格納する#buttons1（ID）が指定されています。

ホバーエフェクトのCSS

ホバーエフェクトを適用するCSSは以下の通りです。jQueryを使用して以下のCSSプロパティの値を操作することで、各ホバーエフェクトを実現しています。

#buttons1 button {
    display: block;
    float: left;
    width: 224px;
    height: 80px;
    margin: 0 10px 20px;
    padding: 0;
    font-size: 16px;
    letter-spacing: 0.15em;
    color: #ebc000;
    background-color: #fff;
    border: none;
    border-radius: 20px;
}

1行目のボタンにホバーエフェクトは以下の効果が適用されます。

• マウスオーバーすると、そのボタンの背景色が徐々に変化する
• マウスアウトすると、そのボタンの背景色が徐々に元に戻る

実現するコードは以下の通りです。

$(function(){
   var duration = 300;

   //buttons1の1行目
   $('#buttons1 button:nth-child(-n+4)')
      .on('mouseover', function(){
         $(this).stop(true).animate({
            backgroundColor: '#ae5e9b',
            color: '#fff'
         }, duration);
      })
      .on('mouseout', function(){
         $(this).stop(true).animate({
            backgroundColor: '#fff',
            color: '#ebc000'
         }, duration);
      });
});

最初に変数durationを宣言し、「300」の値を格納しています。この値は後に出てくるanimate()メソッドの2つめの引数（アニメーションにかける時間）として使用しています。複数の要素で使用する値を変数に格納しておけば、コード全体にたいして一律に変更できます。今回の場合、変数durationの値を変更するだけでアニメーションの速度を調整できます。

処理の対象は’#buttons1 button:nth-child(-n+4)’です。$()関数にこの要素を指定した上でon()メソッドを使用してマウスオーバー時とマウスアウト時の処理を記述しています。

このコードのポイントは、on()メソッド内の処理対象に$(this)をしている点です。thisはユーザーの操作内容に応じた値が格納されます。そのため、上記コードは「#buttons1の要素内の1～4番目の4つの要素のうち、マウスオーバーまたはマウスアウトした要素のみ」にon()メソッドの処理が適用されます。これによって複数の処理対象に対して個別に同一の処理を適用することができます。

thisを使用しなかった場合の不具合

上記コードにおいて、thisを使用せず、以下のコードを記述すると意図しない結果になります。

■thisを使用しなかった場合の不具合例

$('#buttons1 button:nth-child(-n+4)')
   .on('mouseover', function(){
      $('#buttons1 button:nth-child(-n+4)').stop(true).animate({
         backgroundColor: '#ae5e9b',
         color: '#ae5e9b',
      }, duration);
   })

上記コードの場合だと４つの要素のうちいずれかにマウスオーバーまたはマウスアウトすると、４つの要素すべてに処理が適用されます。このように同一種類のボタンに個別に同じ処理を実行したい場合はthisを使用すると良いです。

2行目のボタンのjQuery

2行目のボタンには以下の効果を適用します。

• マウスオーバーすると、そのボタンの外枠から徐々に色面が表示される
• マウスアウトすると、徐々に色面が消える

上記の効果を実現するコードは以下の通りです。

■2行目のボタンのjQuery

$(function(){
   var duration = 300;
   
   //buttons1 1行目のコード

   //buttons1 2行目
   $('#buttons1 button:nth-child(n+5):nth-child(-n+8)')
      .on('mouseover', function(){
         $(this).stop(true).animate({
            borderWidth: '12px',
            color: '#ae5e9b'
         }, duration, 'easeOutSine');
      })
      .on('mouseout', fuction(){
         $(this).stop(true).animate({
            borderWidth: '0px',
            color: '#ebc000'         
         }, duration, 'easeOutSine');
      });
});

上記コードでは、５～８番目のボタンに対して以下の処理を行っています。

• マウスオーバー時は、animate()メソッドを使用してvorderWidthを12pxにする
• マウスアウト時は、animate()メソッドを使用してborderWidthを0pxにする

今回のボタンはanimate()メソッドの3つ目の引数に「イージングの種類」を指定しています。「easeOutSine」を指定すると、アニメーションが即座に実行されているような動きになります。

3行目のボタンのjQuery

３行目のボタンには次の効果を適用します。

• マウスオーバーすると、色面が左側からスライドインして、背景色と文字色の異なるボタンに変化する
• マウスアウトすると、元に戻る

上記のコードを実現する前にHTMLとCSSを見てみましょう。

■3行目ボタンのHTML

<button>Ibis<span class="bg"><span>Ibis</span></span></button>
            <button>Jaeger<span class="bg"><span>Jaeger</span></span></button>
            <button>Kingfisher<span class="bg"><span>Kingfisher</span></span></button>
            <button>Lark<span class="bg"><span>Lark</span></span></button>

上記コードではボタンが2重に重ねられていることがわかります。今回はspan要素に対して処理を行います。また、CSSでは重ねたボタンに異なる色を指定し、overflow: hiddenを指定しています。

■3行目のボタンのCSS

#buttons1 button {
    position: relative;
}

#buttons1 button .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    overflow: hidden;
}

#buttons1 button span span {
    display: block;
    width: 224px;
    height: 80px;
    line-height: 80px;
    color: #fff;
    background-color: #ae5e9b;
    border-radius: 20px;
}

jQueryではこのoverflow: hidden;が指定された要素の幅をアニメーションさせることで今回制作する効果を実現します。

jQueryのコードは以下の通りです。

■3行目のボタンのjQuery

$(function(){

   var duration = 300;

   //buttons1 1行目 省略

   //buttons1 2行目 省略

   //buttons1 3行目
   $('#buttons1 button:nth-child(n+9)')
      .on('mouseenter', function(){
         $(this).find('> span').stop(true).animate({
            width: '100%'
         }, duration, 'easeOutQuad');
      })
      .on('mouseleave', function(){
         width: '0%'
         }, duration, 'easeOutQuad');
   
      });
});

上記コードでは新たにfind()メソッドを使用しています。findメソッドは「jQueryオブジェクトに含まれる各様相の子孫要素の中から、セレクタを使用してさらに要素を絞り込むメソッド」です。今回はfind()メソッドの中に引数span要素を指定することで、処理の対象を「重ねたほうのボタン（span要素内のボタン）」に絞っています。

■find()メソッドの構文

find('絞り込むセレクタ')

メソッドチェーン内でfind()メソッドを使用すると、find()メソッドの前後で処理対象となる要素が変わります。

$()関数とfind()メソッドの違い

$()関数はHTMLドキュメント全体に対してセレクタ要素を絞り込みます。一方でfindメソッドはjQueryオブジェクトの要素の子孫要素を対象としてセレクタで要素を絞り込みます。そのため、以下のコードでは各変数に格納されるjQueryオブジェクトが保持する要素は同じです。

■要素の絞り込み方法の違い

var same1 = $('#buttons1 button > span');
var same2 = $('#buttons1 button').find('> span');
var same3 = $('#buttons1').find('button').find('> span');

関連記事はこちら

jQuery 画像とキャプションの表現

jQueryはじめてみる

jQuery データを格納する

JQueryのアニメーション実装方法

jQueyのスコープと命名規則

jQueryの制御文

jQueryの基礎を体験しよう

jQueryの関数