'If condition in JQuery for changing display

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',
                });
            }
        })
jquerycss


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 freedomn-m

Related Questions