Как запретить нажимать на блок (картинку) если происходит анимация?
$("#block_log").click(function(){
//--------------animate----------------------
if(line1){
$('#line1').css({
'width': '0%',
});
$('#line1').animate({ width:"100%"}, 3000).animate({ width:"0%"});
}else{
};
//---------------add-one--------------------
function line1(){
log++;
$('#log_text').text(log);
};
setTimeout(line1, 3010);
});
Ответы (1 шт):
Автор решения: Pavel Grishaev
→ Ссылка
let log = 1;
let canClick = true; // Можно ли нажимать
$("#block_log").click(function(){
// Если запрещено нажимать, то просто прерываем выполнение функции
if( !canClick ) return;
console.log(`нажато`);
//--------------animate----------------------
if(line1){
$('#line1').css({
'width': '0%',
});
canClick = false; // Запрещаем нажатия
$('#line1').animate({ width:"100%"}, 3000).animate({ width:"0%"}, ()=>{
// В конце анимации сработает эта функция и разрешаем нажатия
canClick = true;
});
}else{
};
//---------------add-one--------------------
function line1(){
log++;
$('#log_text').text(log);
};
setTimeout(line1, 3010);
});
#block_log, #line1 {
box-sizing: border-box;
padding: 20px;
background-color: gray;
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block_log">block_log (нажимать тут)</div>
<div id="line1">line1</div>
Прочие переменные создал только для того, чтобы пример заработал в отсутствии таковых переменных в коде вопроса.