jQuery Snippets #4

Tips

jQuery Snippets #4

基礎的なものからちょっとした動きの実装方法など、jQueryに関する個人的なメモ・スニペットリストです。
書いている内容に対して「もっとスマートにできる」とか「そもそも間違ってる」みたいなのがあれば、参考にさせてもらいたいのでコメントなど通じて是非教えてください。

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

jQuery Snippets #4 目次

  1. hoverでon/off切り替え
  2. on(mouseenter/mouseleave)でon/off切り替え
  3. hover時に透過させる
  4. hover時に一瞬点滅させる
  5. hoverでToggle Class
  6. hoverでon/offフェード切り替え
  7. 指定要素内にあるリンク先に飛ぶ
  8. クリックで要素が震える
  9. 要素を動かす・点滅させる
  10. ○○秒以上hoverしたら...

1. hoverでon/off切り替え

まず「btn_01_off.png」と「btn_01_on.png」というように同じ拡張子が指定してあるhover前後の画像を用意して、それぞれファイル名に「_off」と「_on」と付けておきます。
あとは、jQueryを下記のように記述することで、hover時に画像がオン画像へと切り替わります。

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'));
  }
});

※HTMLは<a href="#"><img src="btn_01_off.png" alt="ボタン" /></a>のような記述を想定しています。

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

目次へ

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

こちらはon(mouseenter/mouseleave)を用いてhover時に画像がオン画像へと切り替わるのを実装したものです。
基本的な動作や見た目は先ほどのものとは変わらず、"current"というclassを用いて切り替わらないようにする記述も含まれています。

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'));
    }
  }
});

※HTMLは<a href="#"><img src="btn_01_off.png" alt="ボタン" /></a>のような記述を想定しています。

目次へ

3. hover時に透過させる

上2つとは違い、こちらはhover時に画像を透過させるというものになります。
最近だとopacitytransition使えばCSSで簡単に実装できますが、それらのCSSがサポートされていないブラウザで実装したい時や何らかの理由でjQueryでやる場合は下記のように記述することで実装できます。

jQuery

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

※HTMLは<a href="#"><img src="btn.png" alt="ボタン" /></a>のような記述を想定しています。

目次へ

4. hover時に一瞬点滅させる

.mouseenter().fadeTo()を下記のように記述することで、hover時に見方によっては一瞬だけ点滅したり光ったような感じに見せることができます。

jQuery

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

※HTMLは<a href="#"><img src="btn.png" alt="ボタン" /></a>のような記述を想定しています。

目次へ

5. hoverでToggle Class

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

jQuery

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

目次へ

6. hoverでon/offフェード切り替え

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

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);
      }
    });
  }
});

※HTMLは<a href="#"><img src="btn_01_off.png" alt="ボタン" /></a>のような記述を想定しています。

目次へ

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

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

jQuery

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

目次へ

8. クリックで要素が震える

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

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');の箇所はスタイルシートを用いて記述しても問題ありませんし、記述内容によっては必要ありません。

目次へ

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

同じような動きを実装する方法はググってもいろいろと出てきますし、もっとスマートにとか使い勝手良い方法とかもあるとは思いますが、いずれも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()');
});

目次へ

10. ○○秒以上hoverしたら...

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

jQuery

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

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

目次へ


上記以外のjQuery Snippetsに関しては下記ページにまとめているので、興味ある方はこちらもご覧ください。

Close the search window,
please press close button or esc key.