お知らせ等で使えそうなバルーン【jQuery】

今年最初の投稿はお知らせ等に使えそうなバルーンです。
バルーン以外の箇所をクリックした時はバルーンを非表示にします。

See the Pen 180112_フキダシ by nekuta (@nekuta) on CodePen.

連続クリックの防止

jQueryの.on()は処理が重複するので、フラグを用意し、処理が始まったらfalse、処理が終わったらfadeIn、fadeOutのスピード分遅延させてtrueに戻しています。

var $icons = $('i');
var flg = true;
var speed = 200;

$icons.on('click', function () {
//flg=trueのものだけ通す
  if (flg) {
    //flgをfalseにして連続クリックを防止
    flg = false;
    var $baloon = $(this).next('.baloon');

    if ($baloon.hasClass('is-active')) {
      $baloon.removeClass('is-active').fadeOut(speed);
    } else {
      $('.baloon').removeClass('is-active').fadeOut(speed);
      $baloon.addClass('is-active').fadeIn(speed);
    }
    //speed(ここでは200ミリ秒)後にflgをtrueにする
    setTimeout(function(){
      flg = true;
    },speed)
  }
  //他の箇所をクリックしたら閉じるように
  $(document).on('click', function (e) {
    if (!$(e.target).closest('.baloon').length) {
      $('.baloon').removeClass('is-active').fadeOut(speed);
    }
  });

  return false;
});

  • コーダーのための計算機