避免脚本闪烁

Question

我正在使用 Javascript 将 div 向下推以显示 Notice。然而，我发现它在加载时闪烁，这让我很恼火，这使得它不是很流畅。有没有办法解决这个问题？我可以通过添加slideDown(1000);使其平滑，然后没有闪烁，但我不希望它在每一页上滑动，我只是希望它显示不闪烁。

Live test

想法？

#fixed {
    position: relative;
}

#notice {
    background: #31384a;
    color: #FFF;
    padding: 5px;
    position: fixed;
    z-index: 999912312399;
    width: 100%;
    top: 0;
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    display: none;

    .exit {
        position: absolute;
        right: 10px;
        top: 5px;
        cursor: pointer;

        img {
            width: 10px;
            height: 10px;
        }
    }
}

JS

var clearCookie = function () {
    var result = $.removeCookie('JSFiddleCookieNotification');
    if (result) {
        alert('Cookie removed, please reload.');
    } else {
        alert('Error: Cookie not deleted');
    }
};

var closeCookie = function () {
    $("#notice").slideUp(400, function(){
        $(this).remove();
    });
    $('#fixed').animate({
        top: 0
    }, 400);
    $.cookie('JSFiddleCookieNotification', 'Notified', {
        expires: 7
    });
};

// Bind the buttons
$("#clearCookie").on("click", clearCookie);
$(".exit").on("click", closeCookie);



// Now display the cookie if we need to
if ($.cookie('JSFiddleCookieNotification') == null) {
    $('#notice').show();

    var timer = setInterval(function () {
        $('navmenu, navmenu-mobile, #fixed').css({
            top: $('#notice').outerHeight()
        });
        if ($('#notice').outerHeight() == $('#fixed').css('top')) {
            clearInterval(timer);
        }
    }, 10);
}

Answer 1

我没有机会阅读您的所有代码，但一个简单的解决方法是使用 slideDown(0)

基本上，这将在 0 毫秒内将您的 div 向下滑动，这将实现与 .show() 相同的效果，但也会停止闪烁