読者です 読者をやめる 読者になる 読者になる

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

画像をhoverした時にキャプションをアニメーションで表示するjQueryプラグインを公開しました

普段は画像しか見えていなくて、マウスでhoverした時にキャプションを表示するプラグインを書きました。
文章よりも実際に確認したほうがわかりやすいと思うので、次のデモページをご覧ください。

使い方

予めjQueryjQuery Hovercapを読み込んでおきます。

<script src="jquery.js"></script>
<script src="jquery.hovercap.js"></script>

画像とキャプションを以下の様な感じでマークアップします。

<div class="target">
<div class="target__image"><img src="..." alt=""></div>
<div class="target__caption">Content...</div>
</div>

マークアップが完了したら、jQuery Hovercapを適用させます。

<script>
$(function() {
  $('.target').hovercap({
    toggleElement: '.target__caption'
  });
});
</script>

指定できるオプションについて

現在指定できるオプションは以下のとおりです。

オプション名 形式 デフォルト値 説明
toggleElement 文字列 無し 表示させたいキャプションのセレクタを指定します
toggleAnimation 文字列 slide キャプション表示のアニメーション方法です。"slide"または"fade"が指定できます。
toggleDirection 文字列 toTop キャプションのアニメーション方向を指定します。
"toTop"は"下から上、"toRight"は"左から右"
"toBottom"は"上から下"、"toLeft"は"右から左"となります。
animationSpeed 数値 200 アニメーションのスピードをms(ミリ秒)で指定します。
animationEasing 文字列 linear アニメーションのイージングを指定します。
onSetup 関数 無し 初期化が終わったタイミングで実行される関数を指定します。
onShow 関数 無し キャプションが表示されたタイミングで実行される関数を指定します。
onHide 関数 無し キャプションが隠れたタイミングで実行される関数を指定します。

対応ブラウザ

ダウンロード

Githubにあげていますのでcloneなりダウンロードなりしてください。
バグ等ありましたらお知らせください。