Question

您好我正在浏览此页面http://rcmhosting.com/accounts/production/fortner/

我在页面的页脚中安装了一个引号旋转器，当引号旋转时，它显示空间占用了第一个，或者“当前”引用仍留有空间，然后第二个引号跳回原位第一个引用（或“当前”）引用即告消失。

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

这是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
}

现在是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

你可以尝试这个CSS“hack”

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

我会使用绝对定位的元素，以便它们可以叠加自己。

<blockquote1>也不是有效的HTML元素。

Answer 2

你在这里交配。你有一个稍微冗长的报价轮换脚本，所以我已经清理了它： http://codepen.io/anon/pen/hawdC

你的问题来自这样一个事实：你的新元素在你的新元素消失之前就已经消失了。

祝你好运。

当第一个引号显示时，jQuery Rotator使页面跳转。

2 个答案: