【jQuery】thisを使用して簡単な吹き出しを実装する方法 / Easy balloon tips

コーディングテクニックの実装内容

今回はWeb制作におけるjQueryのテクニックに関する内容です。テキストをクリックすると補足的な説明文を表示させる吹き出しアニメーションの実装方法をご紹介します。jQueryの記述量も少ないので、是非ご活用ください。

コーディングテクニックの使いどころ

ちょっとした説明文を表示させたい時に便利です。複数設置することも可能です。

>> DEMOはこちらから！（View Demo）

>> View Demo(English Page)

>> ページの読み込みが遅い場合はこちら

CSS,JavaScriptの記述内容

実装に必要なスクリプトはたったのこれだけです。

$(function(){
  $('.list li a').on('click', function() {
    $(this).children().fadeIn();
    $(".bk-balloon").fadeIn();
  })
  $('.bk-balloon').on('click', function() {
    $(".balloon,.bk-balloon").fadeOut();
  });
});

実装のポイント

• 1）テキストをon('click', function())でクリックした時に.fadeIn()で吹き出しを表示
• 2）同時に吹き出しの背面へ.fadeIn()で透明な背景を画面全体に表示させる
• 3）透明な背景をon('click', function())でクリックした時に.fadeOut()で吹き出しと背景をフェードアウトさせる

>> DEMOはこちらから！（View Demo）

>> View Demo(English Page)

PR

ChatGPT 120%活用術 [ ChatGPTビジネス研究会 ] 価格：1,390円（税込、送料無料) (2023/5/23時点) 楽天で購入

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。