0

您好，我正在处理此页面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>
4

2 回答 2

0

你可以试试这个 CSS “hack”

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

我会使用绝对定位的元素，这样它们就可以覆盖自己。

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

于 2014-03-11T00:05:25.433 回答
0

来了，伙计。你有一个稍微冗长的引用轮换脚本，所以我已经清理了它： http ://codepen.io/anon/pen/hawdC

您的问题来自于您在旧元素淡出之前淡入新元素的事实。

祝你好运。

于 2014-03-11T00:26:54.580 回答