Here is the HTML code:
<div class="x">
</div>
<input class="clickMe" type="button" value="ClickMe"></input>
This is the JS code:
$(".clickMe").click(
function()
{
$('.x').show().css('top',0).addClass("mask");
}
);
And here is the CSS styling:
.x
{
width: 200px;
height: 200px;
border: 1px solid #0f0f0f;
position: relative;
top: -210px;
transition: all 1s ease 0s;
float: right;
margin-right: 20px;
}
.mask::before
{
position: fixed;
top:0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
content:"";
background-color: #777;
}
.mask::after
{
content: "";
background-color: #fff;
opacity: 0.5;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
top: 0;
left: 0;
}
.mask
{
transition: all 2s ease 0s;
}
After clicking the button in the fiddle, the mask appears first and then the popup slowly due to the transition effect. How can I make them both transition at the same speed? Are there any other better methods to show both the popup and mask smoothly?
Do you have any suggestions or ideas?