I have been working on a popup that I want to add a subtle animation to. A fade effect seems like the perfect solution.
Here is the code for the button:
<a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.display='block';document.getElementById('portfolio_popup').style.display='block';">
<div class="port_item wow lightSpeedIn" data-wow-delay="0.1s">
<h3>MATERIAIS DE CONSTRUÇÃO</h3>
<p>+</p>
</div>
</a>
And here is the HTML for the popup itself:
<div id="portfolio_popup">
<div class="portfolio_antes">
<h1>Antes</h1>
</div>
<div class="portfolio_depois">
<h1>Depois</h1>
</div>
</div>
<a href="javascript:void(0)" onclick="hide_everything()"><div id="back_overlay" title="Fechar Popup"></div></a>
In addition, here is a small script you can use:
<script type="text/javascript">
function hide_everything() {
$("#back_overlay").css('display', 'none');
$("#portfolio_popup").css('display', 'none');
}
</script>
However, I am unsure how to implement the animation. Do I need to restructure the elements or is there a simpler solution?