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

ほら、どうぞ。少し冗長な引用ローテーション スクリプトがあったので、クリーンアップしました: http://codepen.io/anon/pen/hawdC

あなたの問題は、古い要素がフェードアウトする前に新しい要素をフェードインしていたという事実から来ていました。

幸運を。

于 2014-03-11T00:26:54.580 に答える
0

このCSS「ハック」を試すことができます

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

絶対配置された要素を使用して、それらが自分自身をオーバーレイできるようにします。

また<blockquote1>、有効な HTML 要素ではありません。

于 2014-03-11T00:05:25.433 に答える