CODEWITHSUNDEEP
javascriptcss
user1691389
user1691389

Reputation: 453

swap 'display none' for fadeOut

How do I modify this so that it fades out and removes itself? 

<script>
 close = document.getElementById("close");
 close.addEventListener('click', function() {
   preloader = document.getElementById("preloader");
   preloader.style.display = 'none';     <--- this part, obviously
 }, false);
</script>

On click "display:none" feels too jarring/unsmooth. Thanks!

Upvotes: 0

Views: 182

Answers (1)

GNi33
GNi33

Reputation: 4509

Depends on what browsers you'll need to support, you could use css-transitions to do that:

.fadeOut{
    opacity: 0;
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}

Just add the .fadeOut - class to an element, for further information on transitions, see the MDN article. A list of compatible browsers can be seen at caniuse.com

Other than that, libraries like jQuery have built-in fadeIn/fadeOut - effects, which are just implemented using JavaScript and are compatible for all major browsers out there. (jQuery APi -> fadeOut)

If you would prefer to do this without jQuery, you can check out how they implemented it directly in the source-code. jsapi.info is a nice code-browser, which links used internal functions, giving you the opportunity to quickly see what's getting called and how the called function looks like.

Edit:

Additionally, I just stumbled over a question on Codereview.SE that could help you out: Fade In Fade Out in pure JavaScript

Upvotes: 1

Related Questions