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()达到相同的效果，但也会停止闪烁

避免脚本

1 个答案: