let Confirm = { target : ".button-wrap.switch-button", lock : false }; const ButtonConfirm = (e,type) => { let text = $(e.target), bg = text.siblings(".button-bg"), btn = text.parent(), all = [text,btn,bg]; let Text = { dis : { before : $(btn).siblings(".before"), after : $(btn).siblings(".after") }, dat : { before : $(btn).parent().siblings().children(".before"), after : $(btn).parent().siblings().children(".after") } }; if (!Confirm.lock) { if (type == 'down') { gsap.set([btn,bg],{ scale : 0.95 }); } else if (type == 'up') { let tl = gsap.timeline(), swap = gsap.timeline(); swap .to([Text.dis.before,Text.dat.before],{ duration : 0.2, opacity : 0 }) .set([Text.dis.before,Text.dat.before],{ display : "none", delay : 0.2 }) .set([Text.dis.after,Text.dat.after],{ display : "block" }); tl .call(()=>{ Confirm.lock = true; }) .set(all,{ clearProps : "all" }) .set([btn,bg],{ backgroundColor : Color.green }) .to(bg,{ duration : 0.5, scaleX : 1.2, scaleY : 1.3, opacity : 0 }) .set(all,{ clearProps : "all", delay : 1 }) .call(()=>{ Confirm.lock = false; }) ; } } } $(Confirm.target) .mousedown(function(e) { ButtonConfirm(e,'down'); }) .mouseup(function(e) { ButtonConfirm(e,'up'); });