Question

以下代码在网页顶部显示通知栏/工具提示。设置为每分钟显示一次条形图。然而，它在隐藏后立即重复显示。我们只想每分钟显示一次通知栏。如果我使用页面似乎它工作正常，但每当我走出页面时，它表现得很奇怪。

<script type="text/javascript" >
    $('#notification_hdr').hide();
    setInterval(function () {
        displayNotificationBar();
    }, 72000);

    function displayNotificationBar() {
        $('#notification_hdr').fadeIn(2000).delay(12000).hide(2000);
    }

    $('#close_btn').click(function () {
        $('#notification_hdr').hide(2000)
    });
 </script>

Answer 1

$('#notification_hdr').hide();
var T = setInterval(displayNotificationBar, 72000);

function displayNotificationBar(){
    $('#notification_hdr').fadeIn(2000, function() {
        $(this).delay(10000).hide(2000);    
    });
}

$('#close_btn').click(function() { 
    clearInterval(T);
    $('#notification_hdr').stop(true, true).hide(2000);
});

链接应该可行，但这绝对可行，如果没有，我会认为你的问题出在其他地方。

Answer 2

可以用这种方式更好地更改displayNotificationBar函数：

    function displayNotificationBar() {
        $('#notification_hdr').fadeIn(2000).delay(12000);
        if( $('#notification_hdr').is(':visible') ) {
             $('#notification_hdr').hide(2000)
        }
    }

Answer 3

尝试使用在hide（）

的完整回调中调用的递归函数

function displayNotificationBar() {
    setTimeout(function(){
        $('#notification_hdr').fadeIn(2000).delay(12000).hide(2000,displayNotificationBar    );
    },72000)
}

displayNotificationBar()

jQuery执行重复自己/ .FadeIn / .Hide

3 个答案: