Question

我试图在点击时移动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>

Answer 1

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

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

<强> Demo

停止超时后触发的点击事件

1 个答案: