Where's my Banner?

by dceast

HTML

<div id="parent" class="box">
    
    <h1>Where's my</h1>
    <div id="slide-column"></div>
</div>
<!--/#parent -->

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

body {
    font-family: 'Open Sans Condensed', Arial, Sans-Serif;
    z-index: 11;
}

#slide-column {
    position: absolute;
    height: 100px;
    width: auto;
    top: -150px;
    left: 300px;
    font-size: 72px;
    z-index: 10;
}

div.box {
    border: 1px solid #BBB;
    height: 100px;
    width: 600px;
    margin: 10px;
    padding: 10px;
    position: relative;
    z-index: 9;
    
    background-color: #f1f1f1;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#efefef));/*Saf4+,Chrome */
    background-image: -webkit-linear-gradient(top, #f5f5f5, #efefef); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, #f5f5f5, #efefef); /* FF3.6 */
    background-image: -ms-linear-gradient(top, #f5f5f5, #efefef); /* IE10 */
    background-image: -o-linear-gradient(top, #f5f5f5, #efefef); /* Opera 11.10+ */
    background-image: linear-gradient(to bottom, #f5f5f5, #efefef); /* CSS3 */
}

    div.box > h1 {
        font-size: 72px;                            
    }

JavaScript

$(function() {
   
    (function() {
        
        var actions = new Array("Family?","Friends?","Frat Bros?", "Employees?", "Homies?", "Kids?", "Sister Wives?"),
            i = 0,
            $slideColumn = $('#parent > #slide-column'),
            len = actions.length;
        // do a setTimeout that cycles through the array every 1.5 or so seconds
        // work with the animations afterwards
        setInterval(function(){
            if (len !== i) {
                $slideColumn.text(actions[i]);   
                var pos = $slideColumn.position();
                $slideColumn.text(actions[i]);  
                $slideColumn.animate({
                    top: '20px' 
                });
                i++;
                 
                $slideColumn
                    .hide();
                    
            }
            else {
              i = 0;
                $slideColumn.text(actions[i]);                
                $slideColumn.animate({
                    top: pos.top + 50 + 'px' 
                });
                i++;             
            }
        },1000);
        
    })();
    
    
});