jQuery slideDown（）闪烁？

我在页面中添加了“欢迎席”效果：

我给这个部门上了一堂“欢迎席”课

CSS:

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

（函数（$）{var visitedbehere=Cookies.get（'最终指南'）；
如果（在>=0之前访问）{
//页面已被访问，因此不要显示欢迎垫
//删除（“最终指南”）；
}否则{
//用于在首次加载页面时创建欢迎垫效果
resizeEvent（）；
$（窗口）。绑定（“调整大小”，函数（）{
resizeEvent（）；
});
函数resizeEvent（）{
//$（“div.welcome-mat”）.css（“显示”、“块”）；
//$（“div.welcome-mat”）.css（“height”，$（window.height（））；
$（“div.welcome-mat”）.hide（）.css（“高度”，$（窗口）.height（））.slideDown（500）；
$（“div.welcome-mat”）.css（“padding top”，$（window）.height（）/4）；
}
$（'.close welcome mat'）。在（'click'，函数（e）上{
$（“div.welcome-mat”）.slideUp（500，function（）{$（this.remove（）；}）；
e、 预防默认值（）；
});
//添加显示页面已被访问的cookie
//Cookies.set（'Definitive Guide'，'1'，{expires:14}）；
}})（jQuery）；

一切正常，除了填充没有添加到div的顶部。我有点困惑，因为如果我使用resizeEvent（）中的两个注释掉的行，那么填充确实会被添加

此外，在slideDown（）开始之前，div会出现然后消失

我已经玩了几个小时，研究了一下这个，但我还没完全弄明白

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

干杯

---

John Detlefs

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

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

---

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

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

演示：

您有两种解决方案： 第一种解决方案是将为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);
});

第二种解决方案是使用如下回调函数：

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

演示：

您有两种解决方案： 第一种解决方案是将为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);
});

第二种解决方案是使用如下回调函数：

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

---

那真是太棒了！另外，在滑下之前添加了.delay（1000），消除了闪烁。非常感谢您的帮助。：）那真是太棒了！另外，在滑下之前添加了.delay（1000），消除了闪烁。非常感谢您的帮助。：）