I trying to make header one disappear, then header two appear and disappear and header one appear in a loop. The problem with my code is, that header two appears only for very short amount of time and empty screen follows for at least 2-3 seconds before header one appears. 

JS:

```
var h1 = $('.header_one');
var h2 = $('.header_two');

setInterval(function(){
    h1.fadeOut(1000);
    h2.fadeIn(1000);
    h2.fadeOut(2000, function() { h1.fadeIn(); });
}, 4000);

```

HTML:

```
<h1 class="header_one"> HEADER ONE </h1>
<h2 class="header_two"> HEADER TWO </h2>

```

CSS:

```
h1, h2 {
    z-index: 10;
    position: relative;
}     

h2 {display: none;}

```

There is also a problem: when header two disappears, my two links underneath h1 and h2, that are set to position: relative; move to the top of the page.