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

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

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

スポンサーリンク

この記事は2018年6月22日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

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

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

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

そこで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)テキストをon('click', function())でクリックした時に.fadeIn()で吹き出しを表示
  • 2)同時に吹き出しの背面へ.fadeIn()透明な背景が画面一杯に表示させる
  • 3)透明な背景をon('click', function())でクリックした時に.fadeOut()で吹き出し・背景をフェードアウト

おすすめ記事

スポンサーリンク