javascript - 我怎样才能在第一次点击时给 div 一个 settimeout 而不是在第二次点击时？

Question

这是我制作的 fiddle 的链接:

http://jsfiddle.net/dkarasinski/dj2nqy9c/1/

这是基本代码。

这是我需要的帮助，当您单击黑框时黑色背景打开，然后在 500 毫秒后出现红框，这正是我需要发生的事情。但是当我再次点击红色框时需要500ms才能关闭它，如何绕过settimeout使其与黑色背景同时关闭？

HTML:

<div class="workCont">
<div class="workBlock">
    <div class="workImg">
        <div class="test one">
            <div class="testthree"></div>
        </div>
        <img src="/assets/images/piece1.jpg" />
    </div>
    <div class="workName">Project</div>
</div>

CSS:

.workImg {
        background:#151515;
        width:330px;
        height:201px;
        display:inline-block;
        position: relative;
    }
    .test {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index:100;
        width: 0;
        height: 0;
        -webkit-transition-duration: 300ms;
        -webkit-transition-property: all;
        -webkit-transition-timing-function: ease-in-out;
        text-align: center;
        background: white;
        color: white;
        font-family: sans-serif;  /* Just 'cos */
    }

    .test.open {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position:fixed;
        color:black;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .testthree {
        width:0;
        height:0;
        background-color: red;
        margin:auto;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .testthree.fart {
        width:50%;
        height:300px;

    }

    .testthree.close {
        display:none;
    }
    .workName {
        text-align:center;
        margin-top:17px;
    }

JS:

$(document).ready(function(){
    $(".workImg").click(function() {  
        $(this).find(".test").toggleClass("open");

        if ($(this).find(".test").hasClass("one")) {
            setTimeout(function(){
                $( ".testthree" ).toggleClass( "fart" );
            }, 500);
        }
     });
});

Answer 1

$(document).ready(function(){
    $(".workImg").click(function() {  
        $(this).find(".test").toggleClass("open");

        if ($(this).find(".test").hasClass("one")) {
            if($('.testthree').hasClass("fart")) {
                $(".testthree").removeClass("fart");
            }
            else {
                setTimeout(function(){
                    $( ".testthree" ).addClass( "fart" );
                }, 500);
            }        
        }
     });
});

工作示例:http://jsfiddle.net/dj2nqy9c/2/