Есть вот такая функция:
$('.loginIcon').one('click', function(){
$('.loginIcon').css({
'width' : '100%',
'height' : '100%',
'left' : '0px',
'margin-left' : '0px',
'bottom' : '0px'
});
$('.buttonForSydorenko').css({
'display' : 'block'
});
$('#inputLogin').css({
'display' : 'block'
});
$('.wordLogin').css({
'display' : 'block'
});
$('.buttonForLogin').css({
'display' : 'block'
});
$('#inputLogin').delay(500).animate({height: '80px'},100);
$('.wordLogin').delay(500).animate({'margin-left': '-240px'})
$(this).css({
'background' : 'rgb(73,38,105)',
'padding-top' : '40px'
});
});
Вот переписал внутренности на чистый JS:
loginIcon.addEventListener('click', function(){
loginIcon.style.width = "100%";
loginIcon.style.height = "100%";
loginIcon.style.left = "0px";
loginIcon.style.marginLeft = "0px";
loginIcon.style.bottom = "0px";
loginIcon.style.background = "rgb(73,38,105)";
buttonForSydorenko.style.display = "block";
inputLogin.style.display = "block";
wordLogin.style.display = "block";
buttonForLogin.style.display = "block";
setTimeout( function(){
inputLogin.style.height = "80px";
},500);
wordLogin.classList.add("wordLoginAnim");
loginIcon.style.background = "rgb(73,38,105)";
loginIcon.style.paddingTop = "40px";
alert('OPA');
});
Добавил во втором варианте алерт "Опа".
Цель: чтобы этот алерт вылетел только по первому клику, а следующие клики по этому элементу ничего не делали бы. В jQuery мне помог .one, тут не могу придумать, туплю.
