$("#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попробуйте на время анимации $("#block_log").css("pointer-events", "none")– Pavel NazarianCommented 14 мар. 2021 в 17:29
-
спасибо $("#block_log").css("pointer-events", "none") работает, осталось сделать его временным.– SimbaCommented 15 мар. 2021 в 16:31
-
1параллельно с анимацией запускайте $("#block_log").css("pointer-events", "none"); setTimeout(()=>$("#block_log").css("pointer-events", "auto"),3000);– Pavel NazarianCommented 15 мар. 2021 в 17:16
-
да-да спасибо так и сделал.– SimbaCommented 16 мар. 2021 в 15:09
Добавить комментарий
|
1 ответ
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>
Прочие переменные создал только для того, чтобы пример заработал в отсутствии таковых переменных в коде вопроса.