gpt4 book ai didi

jquery - 超时后停止触发点击事件

转载 作者:太空宇宙 更新时间:2023-11-04 10:11:47 24 4
gpt4 key购买 nike

我试图在单击时向上移动一个 div 并淡入另一个 div,然后如果再次单击则淡出第二个 div,然后向下移动第一个 div。这工作正常,但如果我快速单击图标执行此操作,第一个 div 将向上移动然后向下移动但第二个 div 仍将淡入。当我删除 div 淡入的超时时,它不会执行此操作.

$('#notes-icon').click(function(){ //brings up notes diaply & moves date/time to top
$(this).toggleClass("pinned");
if($('#notes-icon').hasClass('pinned')){
$('#input-box').focus();
$('#time-wrapper').css({top: "13%"})
setTimeout(function(){
$('#notes-wrapper').css({opacity: 1});
},400);
}
else {
$('#notes-wrapper').css({opacity: 0});
setTimeout(function(){
$('#time-wrapper').css({top: "50%"});
},300);
}
})

html:

    <body id="background">
<div id="content">
<div id="icon-wrapper">
<div id="notes-icon" class="icons glyphicon glyphicon-list-alt"></div>
<div id="bg-left" class="icons glyphicon glyphicon-chevron-left"></div>
<div id="bg-right" class="icons glyphicon glyphicon-chevron-right"></div>
<div id="refresh" class="icons glyphicon glyphicon-refresh"></div>
<div id="pin" class="icons"><span></span></div>
</div>
<div id="time-wrapper">
<div id="time"></div>
<div id="date"></div>
</div>
<div id="notes-wrapper" draggable="true">
<input type="text" id="input-box" placeholder="Create a reminder">
</div>
</div>
</body>

最佳答案

你只需要在每次点击时清除超时

var timeoutID;
$('#notes-icon').click(function(){
clearTimeout(timeoutID);
....
}

Demo

关于jquery - 超时后停止触发点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37545404/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com