文字淡入淡出Chrome中的淡入淡出问题

时间:2014-03-31 02:44:03

标签: javascript jquery css

http://jsfiddle.net/8SQA8/1/

当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);

0 个答案:

没有答案