お知らせ等で使えそうなバルーン【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;
});
