あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】thisを使用した簡単な吹き出しを作成するテクニック/Easy balloon tips

【jQuery】thisを使用した簡単な吹き出しを作成するテクニック/Easy balloon tips

スポンサーリンク

実装内容

単語をクリックして補足的な説明文を表示させる。そんな、ちょっとした吹き出しが必要な時にthisを使用したサンプルを用意しました。複数のバルーンメッセージを設置する必要がある時に便利かもしれません。jQueryの記述量も少ないので、是非ご活用ください。

実装所要時間:10分程度

実装方法

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

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

1.吹き出しを出したいテキストをクリックすると、吹き出しがフェードイン
2.同時に吹き出しの背面へ透明な背景が画面一杯にフェードイン
3.背景をクリックすると吹き出し・背景がフェードアウト
という簡単な仕組みです。

スポンサーリンク