CODEWITHSUNDEEP
jqueryhtmlhidefadeinfadeout
Kevin Oluseun Karimu
Kevin Oluseun Karimu

Reputation: 545

jQuery Execution Repeats Itself / .FadeIn / .Hide

The following code displays a notification bar / tool tip on top of a webpage. It is set to display the bar about every minute. However it repeats the display right after the hide. We only want to display the notification bar every minute. It seems like it works fine if I am using the page but whenever I step outside of the page it behaves weirdly.

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

Upvotes: 0

Views: 119

Answers (3)

adeneo
adeneo

Reputation: 318182

$('#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);
});

Chaining should work, but this should most definitely work, if it doesn't I would think your problem lies other places.

Upvotes: 1

freedev
freedev

Reputation: 30037

May be better change displayNotificationBar function in this way:

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

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

Try using a recursive function that gets called in the complete callback of hide()

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

displayNotificationBar()

Upvotes: 0

Related Questions