jQuery slideDown() 闪烁？

Question

我有一个添加到页面的 "Welcome mat" 效果： http://citymoveremovals.com.au/definitive-moving-guide/

我给了 div class 的 "welcome-mat"

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 出现然后消失。

我已经研究了几个小时，但还是不能完全确定！

提前感谢您的帮助，如果我遗漏了信息，请告诉我！

干杯，

约翰·德特莱夫斯

Answer 1

您需要将 'px' 添加到您的 css 作业中。试试这个：

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

Answer 2

演示：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);
});

jQuery slideDown() 闪烁？

jQuery slideDown() flicker?

jquery

slidedown