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


Tags: javascript,jquery,html,css

Problem :

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


Solution :

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


    CSS Howto..

    How to place a Show/Hide toggle button next to a header (not under the header)?

    How can i override this css behavior with jquery?

    How to set background color to the column using CSS?

    How to change parent's CSS only when child is hovered?

    How to Surround Links with Bounding Box Using CSS

    How to create a border-bottom in CSS using a text character such as a dash, letter or number

    How do I replicate this website in terms of responsiveness using only css?

    How Does CSS Opacity Work When Adding Class?

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    How to set a background image in rails from css?

    How to download custom font for users who don't have it? [duplicate]

    How to create and edit a css file in browser Dom by javascript and then download it?

    How to create a set of css rules for safari

    How to Move Parent Div Position using css on hover

    Some misunderstanding how to use bootstrap and css

    How to change inline css using jquery in joomla

    How to dynamically scale images per height using pure CSS?

    How to exclude CSS file from Visual Studio intellisense?

    Any idea how to add this sinking hover effect to an image/link?

    How to make this inner div vertically centered? (Using CSS)

    How to stretch parent div to fit children div?

    How can I add a transition effect when opening my custom modal window?

    only show those div where i do mouse-over

    how can I make my navbar scroll smoothly to the top on page click

    How to apply different CSS style to child elements as they occur inside one another?

    How to point to a specific icon in an icon set?

    Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

    How to build a hover effect with css only, or css+jquery

    CSS : How to have an input field auto adjusting its width

    How to make this css readable?