基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第4弾です。

動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。

hoverでon/off切り替え

まずbtn_01_off.png, btn_01_on.pngのように同じ拡張子で且つ画像名が_off_on部分のみ異なるホバー前後の画像を用意しておきます。
あとは、HTMLが<a href="#"><img src="btn_01_off.png" alt="ボタン" /></a>のような記述を想定のときにjQueryを下記のように記述することで、ホバー時に画像がオン画像へと切り替わります。

jQuery
$('a img').hover(function() {
  $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
}, function() {
  if ( !$(this).hasClass('current') ) {
    $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
  }
});

また、この記述は切り替えたくない画像が出てきた場合も考慮しており、その際はimg要素のsrc_onが付いた画像を指定し、そこにclass="current"を付加すればホバー時に画像が切り替わらないようにできます。
この処理は今後確実に使う予定がなければ、4行目と6行目に記述してある条件分岐を取り除いてください。

on(mouseenter/mouseleave)でon/off切り替え

こちらはon(mouseenter/mouseleave)を用いてホバー時に画像がオン画像へと切り替わるのを実装したものです。
基本的な動作や見た目は先ほどのものとは変わらず、.currentというclassを用いて切り替わらないようにする記述も含まれています。
また、HTMLは<a href="#"><img src="btn_01_off.png" alt="ボタン" /></a>のような記述を想定しています。

jQuery
$('a img').on({
  'mouseenter':function() {
    $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
  },
  'mouseleave':function() {
    if ( !$(this).hasClass('current') ) {
      $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
    }
  }
});

ホバー時に透過させる

上2つとは違い、こちらはホバー時に画像を透過させるというものになります。
最近だとopacitytransition使えばCSSで簡単に実装できますが、それらのCSSがサポートされていないブラウザで実装したい時や何らかの理由でjQueryでやる場合は下記のように記述することで実装できます。
HTMLは<a href="#"><img src="btn.png" alt="ボタン" /></a>のような記述を想定しています。

jQuery
$('a img').on({
  'mouseenter':function() {
    $(this).fadeTo(200, 0.6);
  },
  'mouseleave':function() {
    $(this).fadeTo(200, 1.0);
  }
});

ホバー時に一瞬点滅させる

.mouseenter().fadeTo()を下記のように記述することで、ホバー時に見方によっては一瞬だけ点滅したり光ったような感じに見せることができます。
HTMLは<a href="#"><img src="btn.png" alt="ボタン" /></a>のような記述を想定しています。

jQuery
$('a img').on({
  'mouseenter':function() {
    $(this).fadeTo(0, 0.6).fadeTo(400, 1.0);
  }
});

ホバーでclassの付与・削除

下記の場合は要素にホバーすると.is-hoverというclassが付加され、外れるとclassも削除されるというものになります。
アニメーションをCSSで実装していて、それをホバー時に実行したいなんてときに使えるかなと思います。

jQuery
$('element').on({
  'mouseenter':function() {
    $(this).addClass('is-hover');
  },
  'mouseleave':function() {
    $(this).removeClass('is-hover');
  }
});

ホバーでon/offフェード切り替え

状況によっては内容を修正する必要が出てくるのですが、画像のon/off切り替えをフェードで行いたい場合は下記のように記述することで実装できます。
まず、if ( this.src.match('_off') )の部分で画像に_offという記述があるかどうかを判定します。
あった場合はその要素のsrcを一部変更したものにposition: absolute;opacity: 0;のスタイル指定を追記して、.before()を使ってホバー後の画像として設置します。
あとは、ホバー時にその追加した画像のopacityの値を.animate()で変化させれば、画像がフェードで切り替わるような見た目を実装できます。 HTMLは<a href="#"><img src="btn_01_off.png" alt="ボタン" /></a>のような記述を想定しています。

jQuery
$('a img').each(function() {
  if ( this.src.match('_off') ) {
    var imgSrc = $(this).attr('src').replace('_off', '_on');
    var imgAlt = $(this).attr('alt');
    var onImg = $('<img src="' + imgSrc + '" alt="' + imgAlt + '" style="position:absolute; opacity:0;" />');

    $(this).before(onImg).parent('a').css({
      'position':'relative',
      'display':'inline-block'
    });
    $(onImg).on({
      'mouseenter':function() {
        $(this).stop().animate({'opacity': '1'}, 300);
      },
      'mouseleave':function() {
        $(this).stop().animate({'opacity': '0'}, 300);
      }
    });
  }
});

指定要素内にあるリンク先に飛ぶ

リンク領域を容易に広げることができたり、HTML5を使用していて予めその要素全体をa要素で括るなどしておけば必要ないですが、そうではない場面で使える方法です。
サンプルは通常だと指定した要素をクリックした際にリンク先に飛ばないものを、要素内にあるahrefにリンクさせるというものです。

jQuery
$('element').on('click', function() {
  window.location = $(this).find('a').attr('href');
  return false;
});

クリックで要素が震える

こういった動きを実装する便利なプラグインもありますが、簡易的なものであれば下記で実装できます。
ここではクリック時なのでclickを使用していますが、mouseenterに変更すればホバー時にという動きにできます。

jQuery
$('element').css('position', 'relative');
$('element').on('click', function() {
  $(this).animate({ 'left':'10px' }, 20)
         .animate({ 'left':'-8px' }, 20)
         .animate({ 'left':'6px' }, 20)
         .animate({ 'left':'-4px' }, 20)
         .animate({ 'left':'2px' }, 20)
         .animate({ 'left':'-0px' }, 20);
});

$('element').css('position', 'relative');の箇所はスタイルシートを用いて記述しても問題ありませんし、記述内容によっては必要ありません。

要素を動かす・点滅させる

同じような動きを実装する方法はググってもいろいろと出てきますし、もっとスマートにとか使い勝手良い方法とかもあるとは思いますが、いずれもsetTimeoutanimateを組み合わせて、要素を動かしたり点滅させる方法です。

左右に動かす

jQuery
function foo() {
  $('element').css('position', 'relative');
  $('element').animate({ 'left': '-10px' }, 1000)
              .animate({ 'left': '10px' }, 1000);
  setTimeout('foo()', 2000);
}
$(function() {
  setTimeout('foo()');
});

$('element').css('position', 'relative');の箇所はスタイルシートを用いて記述しても問題ありませんし、記述内容によっては必要ありません。

ゆっくり点滅

jQuery
function bar() {
  $('element').animate({
    'opacity': 'toggle'
  }, 1500);
  setTimeout('bar()', 1500);
}
$(function() {
  setTimeout('bar()');
});

早く点滅

jQuery
function baz() {
  $('element').animate({
    'opacity': 'toggle'
  }, 0);
  setTimeout('baz()', 300);
}
$(function() {
  setTimeout('baz()');
});

○○秒以上ホバーしたら...

setTimeoutを利用して、特定の要素に○○秒以上ホバーしたら○○するといった動きを実装する方法です。
下記の場合は要素に3秒ホバーすると.activeというclassが付加されるものになり、ホバーを外せばclassも削除されます。

jQuery
$('a').on({
  'mouseenter':function() {
    timer = setTimeout(function(){
      $('a').addClass('active');
    }, 3000);
  },
  'mouseleave':function() {
    $('a').removeClass('active');
    clearTimeout(timer);
  }
});

上記はホバーした要素に対してですが、ほんの少し記述を変更すれば「A要素に○○秒ホバーするとB要素で○○される」という動きなども実装できます。


その他のjQuery Snippetsに関しては下記ページから確認できます。