jQuery slideDown() мерцание?

Question

У меня есть «Добро пожаловать коврик» эффект, который я добавил к странице: http://citymoveremovals.com.au/definitive-moving-guide/

Я дал Div класс «приветственной-мат»

CSS:

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

сценарий JQuery:

<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); 

Все работает нормально, за исключением того, что прокладка не добавляется в верхнюю часть div. Я немного смущен, потому что, если я использую две прокомментированные строки в resizeEvent(), тогда добавление добавляется.

Кроме того, перед удалением slideDown() в div появляется, а затем исчезает.

Я общаюсь с этим в течение нескольких часов и исследую, но не могу на него положиться!

Спасибо за вашу помощь заранее, и если я пропустил информацию, пожалуйста, дайте мне знать!

Cheers,

Джон Detlefs

Answer 1

Демо: https://jsfiddle.net/IA7medd/1u4ohbuk/

У вас есть два решения: первое решение, чтобы переместить линию сценария, которые дают отступы в DIV выше того, что делает его скользить вниз, как это:

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

второе решение заключается в использовании функции обратного вызова, как это:

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

Answer 2

Вам нужно добавить 'точек' к заданию CSS. Попробуйте это:

$("div.welcome-mat").css("padding-top", $(window).height()/4 = "px");