jQuery slideDown() flicker?

Question

I have a "Welcome mat" effect that I've added to a page: http://citymoveremovals.com.au/definitive-moving-guide/

I've given the div a class of "welcome-mat"

CSS:

body.hero-content-2 div.welcome-mat {
 display: none;
 height: 0px;
}

The jQuery script:

<script>
(function($) {var visitedBefore = Cookies.get('Definitive Guide');

if (visitedBefore >= 0) {
    // page has been visited, so don't show the welcome mat
    //Cookies.remove('Definitive Guide');
} else {

    // Used to create a welcome mat effect when page is first loaded
    resizeEvent();

    $(window).bind("resize", function() {
        resizeEvent();
    });

    function resizeEvent() {
    //    $("div.welcome-mat").css("display", "block");
    //    $("div.welcome-mat").css("height", $(window).height());
        $("div.welcome-mat").hide().css("height", $(window).height()).slideDown(500);
        $("div.welcome-mat").css("padding-top", $(window).height()/4);
    }

    $('.close-welcome-mat').on('click', function(e){
        $("div.welcome-mat").slideUp(500, function() { $(this).remove(); } );
        e.preventDefault();
    });

    // Add a cookie showing the page has been visited
    //Cookies.set('Definitive Guide', '1', { expires: 14 });    
}})(jQuery);

Everything is working fine, except the padding doesn't get added to the top of the div. I'm a bit confused because if I use the two commented out rows in resizeEvent() instead, then the padding does get added.

Also, before the slideDown() kicks in the div appears and then disappears.

I've been playing around with this for a couple of hours and researching, but can't quite put my finger on it!

Thanks for your help in advance, and if I've missed info please let me know!

Cheers,

John Detlefs

Answer 1

Demo: https://jsfiddle.net/IA7medd/1u4ohbuk/

You have two solutions : the first solution is to move the line of script which give the padding to the div above that which make it slide down like this:

function resizeEvent() {
        $("div.welcome-mat").css("padding-top", $(window).height()/4);
        $("div.welcome-mat").hide().css("height", $(window).height()).slideDown(500);
    } 

the second solution is to use the call back function like this:

$("div.welcome-mat").hide().css("height", $(window).height()*3/4).slideDown(500, function(){
    $("div.welcome-mat").css("padding-top", $(window).height()/4);
});