当Chrome中的fadeIn和fadeOut时,文字会有点失真,IE和Firefox工作正常,如何解决?
HTML
<div class="container">
<div class="inner">aaaaaaaa</div>
<div class="inner">bbbbbbbb</div>
<div class="inner">ssssssss</div>
</div>
CSS
.container {
position: relative;
width: 400px;
height: 200px;
background: url("http://lorempixel.com/400/200/");
}
.inner {
font-family: "Century Gothic", sans-serif;
font-size: 70px;
text-shadow: 3px 3px 5px #ff0000;
text-align: center;
width: 400px;
height: 200x;
color: white;
position: absolute;
left: 0px;
top: 0px;
}
的JavaScript
var divs = $('.inner'),
current = 0,
divSize = divs.size();
divs.filter(':gt(0)').hide();
setInterval(function() {
current++;
divs.filter(':visible').fadeOut();
divs.eq(current).fadeIn();
if ((current + 1) === divSize) {
current = -1;
}
},3000);