CODEWITHSUNDEEP
javascriptjqueryhtmlcss
GrooveChampion
GrooveChampion

Reputation: 111

How can I give a settimeout to a div on first click but not on second click?

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?

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

Upvotes: 0

Views: 62

Answers (3)

Rayon
Rayon

Reputation: 36609

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

Upvotes: 0

Nathan
Nathan

Reputation: 12000

$(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/

Upvotes: 1

NightOwlPrgmr
NightOwlPrgmr

Reputation: 1374

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

Upvotes: 1

Related Questions