Top Bar Slider

using .setInterval() and clearInterval() for displaying div

by FrictionlessPulley

HTML

<div class="headerbar" style="display:none"> 
this is the info at the top
</div>

CSS

.headerbar {
    width :100%;
    height : 16px;
    background : red;
    border: 1px solid #000;
    margin : 0em;
    padding : 1em;
}

JavaScript

$(function() {

   var showTime = 5000;
   var transition = 'slow';
   var target = $('.headerbar');
   var flag = false;
    
    target.slideDown(transition);
    var id = setInterval(function(){hide(target);}, showTime);
    
    var hide = function(item) {
        debugger;
        if(flag){
            return;
        }
        clearInterval(id);
        item.slideUp(transition);
    };

    target.hover(function() {
        flag = true;
        clearInterval(id);
        $(this).show();
    }, function() {
        flag = false;
        id = setInterval(function(){hide(target);}, showTime);
    });

});