如何在第一次点击时将div设定为div而不是第二次点击？

Here is a link to the fiddle I have worked out:

这是我制作的小提琴的链接:

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

It is the basic code.

这是基本代码。

Here is what I need help with when you click the black box the black background opens up and then after 500ms the red box appears, that is exactly what I need to happen with this. But when I click the red box again it takes 500ms to close it, how can I circumvent the settimeout so that it closes at the same time as the black background?

这是我需要帮助的单击黑色背景打开黑色框,然后500ms后出现红色框,这正是我需要发生的事情。但是当我再次单击红色框时需要500毫秒来关闭它,我怎样才能规避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);
        }
     });
});

3 个解决方案

#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);
            }        
        }
     });
});

Working example: http://jsfiddle.net/dj2nqy9c/2/

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

#2

Use $(".workImg").one('click', function() {

使用$(“。workImg”)。one('click',function(){

#3

Try this:

var firstClick=false;
$(document).ready(function(){
    $(".workImg").click(function() {

        if(!firstClick)
        {
            firstClick=true;
            //Code to be executed after first click
        }
        else{
            //Code to be executed for more than 1 clicks
        }
    });
});