How to make addEventListener sync

Question

when window loads div with a class preload doesnt disappear with transition 0.5s; it disappears immediately. I want to first disappear with transition 0.5s then add display none

window.addEventListener('load', () => {
      $('.preload').css({
         'opacity': '0',
         'transition': '0.5s'
      });
   });
   $('.preload').css('display': 'none');

Answer 1

I think this is the shortest way to achieve that. fadeOut is a jquery method, which creates an animation, for fade effect, and sets display to none , when the element gets faded completely. The parameter is the time for transition in milliseconds .

Check fadeOut here : fadeOut

 $(window).on('load', () => { $('.preload').fadeOut(500); });

 html, body{ margin: 0; } .preload { height: 200px; width: 100vw; background: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="preload"></div>