我已经全神贯过地寻找答案,但找不到任何东西,所以如果我的谷歌缺乏,请原谅我。
我有一个在线简历,其中一部分每个闪烁客户赞誉5秒。我使用jQuery淡出div,从下一个荣誉更新文本并淡入。它在Chrome中完美运行。但是,在Firefox中,字符串" st"的每个实例都是如此。被遗漏了。换句话说,"令人沮丧的"被渲染为"果实," "最好的"被渲染为" be"和"客户"被渲染为" cuomer。"有趣的是,该控制台日志在Firefox中显示正确的文本。
在Chrome中:
在Firefox中:
JS:
function runKudosSlideshow() {
var numkudos = $('.kudosquote').length;
var kudostext = [];
var kudosheight;
var kudosmargin;
var thiskudos;
var i;
var j = 0;
for (i = 0; i < numkudos; i++){
kudostext[i] = $('.kudosquote').eq(i).text();
}
setInterval(function() {
console.log(kudostext[j]);
thiskudos = kudostext[j];
$('#thekudos').animate({opacity:0},500, function(){
$('#thekudos').text(thiskudos);
kudosheight = $('#akudos').height();
kudosmargin = (10 + (40 - (kudosheight / 2)));
$('#akudos').css('margin-top',kudosmargin);
$('#thekudos').animate({opacity:1},500);
});
j++;
if (j >= numkudos){
j = 0;
}
}, 5000);
}
HTML:
<div id="akudos">
<span id="thekudos">
CUSTOMER PRAISE....
</span>
</div>
<div id="quotes">
<p class="kudosquote">This was the best service I've had all day!</p>
<p class="kudosquote">The best</p>
<p class="kudosquote">The best</p>
<p class="kudosquote">The best</p>
</div>
CSS:
#akudos{
position:relative;
left:100px;
width:650px;
margin-top:35px;
z-index:100;
}
.kudosquote{
display:none;
}
#kudos{
position:absolute;
top:170px;
left:0;
width:820px;
height:100px;
z-index:90;
background:-o-prefix-linear-gradient(bottom, rgba(200,200,200,.8) 50%, rgba(200,200,200,.6) 80%, rgba(200,200,200,.25));
background:-moz-prefix-linear-gradient(bottom, rgba(200,200,200,.8) 50%, rgba(200,200,200,.6) 80%, rgba(200,200,200,.25));
background:-prefix-linear-gradient(bottom, rgba(200,200,200,.8) 50%, rgba(200,200,200,.6) 80%, rgba(200,200,200,.25));
background:linear-gradient(to top, rgba(200,200,200,.8) 50%, rgba(200,200,200,.6) 80%, rgba(200,200,200,.25));
}
#thekudos{
font-family:'Radley', 'Times New Roman', Times, serif;
font-style:italic;
font-size:20px;
text-align:left;
color:#3E3E87;
}