두 번째 클릭이 아닌 첫 번째 클릭에는 div에 settimeout을 어떻게 줄 수 있습니까?

다음은 내가 해결 한 바이올린에 대한 링크입니다.

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

기본 코드입니다.

여기에 검은 색 상자를 클릭하면 검은 색 배경이 열리고 500ms 후에 빨간색 상자가 나타나는데 도움이 필요합니다. 그러나 빨간색 상자를 다시 클릭하면 닫는 데 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);
        }
     });
});