jQuery Rotator making page jump when the first quote shows up.

Question

Hello I am working on this page http://rcmhosting.com/accounts/production/fortner/

I installed a quote rotator in the footer of the page, when the quotes rotate it appears that the space took up by the first, or "current" quote still leaves the space there and then the 2nd quote jumps back into place as soon as the first quote (or "current") quote disappears.

<script type="text/javascript">
$(document).ready(function() {
//Quotes rotator
var divs = $('.cbp-qtcontent');

function fade() {
var current = $('.current');
var currentIndex = divs.index(current),
nextIndex = currentIndex + 1;

if (nextIndex >= divs.length) {
nextIndex = 0;
}

var next = divs.eq(nextIndex);

next.stop().fadeIn(1500, function() {
$(this).addClass('current');
});

current.stop().fadeOut(1500, function() {
$(this).removeClass('current');
_startProgress()
setTimeout(fade, 1500);
});
}

function _startProgress(){
$(".cbp-qtprogress").removeAttr('style');
$(".cbp-qtprogress").animate({
} , 8000);
}

_startProgress()
setTimeout(fade, 8000);
});
</script>

And here is the CSS!

.cbp-qtrotator {
float: left;
margin: 0;
padding-top: 11px
}
.cbp-qtcontent {
height: auto;
top: 0;
z-index: 2;
display: none
}
.cbp-qtrotator .cbp-qtcontent.current {
display: block
}
.cbp-qtrotator blockquote1 {
margin: 40px 0 0 0;
padding: 0
}
.cbp-qtrotator blockquote1 p {
color: #888;
font-weight: 300;
margin: 0.4em 0 1em
}
.cbp-qtrotator blockquote1 footer {
}
.cbp-qtrotator blockquote1 footer:before {
content: '― '
}
.cbp-qtrotator .cbp-qtcontent img {
float: right;
margin: 50px 0 0 50px
}
.cbp-qtprogress {
position: absolute;
background: #47a3da;
height: 1px;
width: 0%;
z-index: 1000
}

And now the HTML!

<div class="cbp-qtcontent current">
<blockquote1>
<p>"Our relationship with Fortner Insurance Services has been wonderful! We know     Fortner Insurances can do it all and do it well! We have our business, home, workman's comp, auto, health, life, and even my boat - and THAT is important!"</p>
<footer>Karl Jones, owner</footer>
</blockquote1>
</div>

Answer 1

You could try this CSS "hack"

#cbp-qtrotator > div {
position: absolute;
top: 43px;
left: 0;
}

I would using absolutely positioned elements so they can overlay themselves.

Also <blockquote1> is not a valid HTML element.

Answer 2

Here you go mate. You had a slightly verbose quote rotation script so I've cleaned it up: http://codepen.io/anon/pen/hawdC

Your issue was coming from the fact that you were fading in your new element before your old one was faded out.

Good luck.