Question

我有一个“欢迎垫”效果，我已添加到页面： http://citymoveremovals.com.au/definitive-moving-guide/

我给了div一类“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（）中使用两个注释掉的行，那么填充就会被添加。

此外，在幻灯片放出之前，div会出现然后消失。

我已经玩了几个小时和研究，但不能完全指责它！

提前感谢您的帮助，如果我错过了相关信息，请告诉我们！

干杯，

John Detlefs

Answer 1

您需要在css分配中添加“px”。试试这个：

$("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（）闪烁？

2 个答案: