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

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

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

スポンサーリンク

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

テキストをクリックすると補足的な説明文が表示される

そんな、ちょっとした説明文を表示する時は吹き出しのアニメーションが便利です。

そこでthisを使用したサンプルを用意しました。複数のバルーンメッセージを設置する必要がある時に便利かもしれません。jQueryの記述量も少ないので、是非ご活用ください。

実装所要時間:10分程度

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)吹き出しを出したいテキストをクリックすると、吹き出しがフェードイン
  • 2)同時に吹き出しの背面へ透明な背景が画面一杯にフェードイン
  • 3)背景をクリックすると吹き出し・背景がフェードアウト

このような簡単な仕組みです。

おすすめ記事

スポンサーリンク