If condition in JQuery for changing display

Question

What I am wanting is when the loader's display goes to none then the script should work, but the if condition is not working with display == none.

$(window).on('load', function () {
            $('.load').fadeOut('slow');
        });

        $(window).ready(function () {

            if ($('.load').css('display') == 'none') {
                $('.welcome').css({
                    transform: 'translateY(0px)',
                    opacity: '1',
                });
                $('.wel').css({
                    transform: 'translateY(0px)',
                    opacity: '1',
                });
            }
        })

score 1 · Accepted Answer · answered Mar 18 '22 at 18:43

If you were to change .fadeOut('slow'); to .hide() then your 2nd script will probably work.

It's not working because .fadeOut takes time before it's display-none.

Instead, use the callback option of .fadeOut:

$('.load').fadeOut('slow', function() {
    ... code that runs when fadeOut completed ...

$(function() {
  $('.load').fadeOut('slow', function() {

    $('.welcome').css({
      transform: 'translateY(0px)',
      opacity: '1',
    });
    $('.wel').css({
      transform: 'translateY(0px)',
      opacity: '1',
    });
    
  });
});

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

<div class='load'>Loading...</div>
<div class='welcome' style='opacity:0'>Welcome</div>

If your welcome transition code needs to be somewhere else, you can trigger a custom event and listen for that.

but will ('.load') be displaying till the websites content loads up ? — Vishesh Bindal, Mar 19 '22 at 03:34
You can still put the code in window.on(load) - see [onload vs doc ready](https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready) — freedomn-m, Mar 19 '22 at 06:43

If condition in JQuery for changing display

1 Answers1