load a fading div on resizing

load a fading div on resizing


I want to load a preloader on resizing

the HTML
  1. <div id="preloader"></div>

the CSS
  1. #preloader{
  2. width:100vw;
  3. height:100vh;
  4. z-index:9999;
  5. background:@black;
  6. position:absolute;
  7. top:0;
  8. left:0;
  9. text-align:center;
  10. opacity:0;
  11. display:none;
  12. }


When resizing and when the  html total (viewport) width cross the size  1440px    1024px  768px
I would like to set the opacity : 1  and display:block;  for the #preloader  with a  0.5second  fading effect

I cannot find a good way to do that 


  1. function runPreloader() {
  3.       $("#-preloader").delay(100).fadeOut(700);
  4.     $('body').animate({ opacity: 1}, 700, function() {});
  5. }
  6. var $ww = $(window).innerWidth();
  7. var $widths = [ 1400,1280,768 ];
  8. $(window).resize(
  9. $.each( $widths, function( $key, $val ) {
  10. if($ww == $val){
  11. runPreloader;
  12. }
  14. });
  15. );




thanks for your help