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

TOP > jQuery > 【jQuery】thisを使用した簡単なバルーンメッセージの実装方法

【jQuery】thisを使用した簡単なバルーンメッセージの実装方法

スポンサーリンク

実装内容

単語をクリックして補足的な説明文を表示させる。そんな、ちょっとしたバルーンメッセージが必要な時に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.背景をクリックすとバルーンと背景がフェードアウト
という簡単な仕組みです。

スポンサーリンク