CODEWITHSUNDEEP
jquerycss
lewis
lewis

Reputation: 89

Stop click event being triggered after timeout

I'm trying to move a div up and fade in another when on click, then if clicked again fade out the second div then move down the first div. This is working correctly though if I click quickly on the icon for doing this, the first div will move up then move down but the second div will still fade in. It doesn't do this when I remove the timeout for the div fading in.

$('#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>

Upvotes: 0

Views: 80

Answers (1)

GL.awog
GL.awog

Reputation: 1322

You just need to clear timeout on every click

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

Demo

Upvotes: 1

Related Questions