lookkl lookkl - 5 months ago 9
CSS Question

Make field appear using CSS and Jquery

I just want to create a field which will appear if the user clicks on a button. I know that would also work with just a simple target in CSS, but in my use, I need to do this in the way I tried it. I know it's very much CSS, but I think it shouldn't be too hard to check.

Here is my try:



function brief() {
$('.envelope-wrapper').toggleClass('animate');
}

.envelope-wrapper {
opacity: 0;
width: 735px;
height: 440px;
left: 50%;
margin-left: -367px;
top: 300px;
margin-top: -220px;
border-radius: 10px;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
overflow: visible;
background: #008da9;
}
.envelope-wrapper.animate {
-webkit-animation-name: visible;
-webkit-animation-duration: 2s;
-webkit-animation-direction: forward;
-webkit-animation-timing-function: ease-out;
}
@-webkit-keyframes visible {
0% {
opacity: 0;
}
10% {
opacity: 10;
}
90% {
opacity: 10;
}
100% {
opacity: 0;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onclick="brief()" class="gogogo">go</div>
<div class="envelope-wrapper"></div>




Answer

It might because the envelope-wrapper seems to be forming a overlay on top of the gogogo element which would not fire a click event.

Set position:relative for both the elements.

.gogogo {
    position: relative;
}

.envelope-wrapper {
    position: relative;

Check Fiddle

Also opacity values varies between 0 and 1

@-webkit-keyframes visible {
    0% {
        opacity: 0;
    }
    10 {
        opacity: 0.1;
    }
    90% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

Check Update Fiddle

Comments