jquery - 为什么这个飞舞的文字渲染不连贯？

Question

我有一个飞行的文本侯爵，它在飞入时呈现出非常不稳定的效果(尤其是在 FireFox 中)它似乎以特定的间隔跳跃，我想知道是否可以通过使用 easeIn 或类似的东西让它运行得更顺畅。对此有什么想法吗？

我设置了一个 jsfiddle为了方便。

HTML:

<div id="taglines">
    <h4>Your expert. Your partner.</h4>
</div>
<div class="container">
    <h3 id="fly1" class="flying-text active-text">Creative Solutions</h3>
    <h3 id="fly2" class="flying-text">Graphics</h3>
    <h3 id="fly3" class="flying-text">Sourcing</h3>
    <h3 id="fly4" class="flying-text">Distribution</h3>
    <h3 id="fly5" class="flying-text">Online Tools</h3>
    <h3 id="fly6" class="flying-text">Custom Branding</h3>
    <h3 id="fly7" class="flying-text">Personalized Support</h3>
</div>​

CSS:

.container{
    width:1000px;
    margin:0 0 0 -10px;
    color:#c3cd25;
}

#taglines{
    color:#000;
}

#taglines h4{
    font-size:20px;
}

.flying-text{
    margin-left:-100px;
    font-size:40px;
}

JavaScript:

$(document).ready(function(){
    $('.container .flying-text').css({opacity:0});
    $('.container .active-text').animate({opacity:1, marginLeft: "350px"}, 4000);

    var int = setInterval(changeText, 5000);    

    function changeText(){
        var $activeText = $(".container .active-text"); 
    var $nextText = $activeText.next(); 

        if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');

    $activeText.animate({opacity:0}, 1000);
        $activeText.animate({marginLeft: "-100px"});    
        $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "350px"}, 4000, function(){ 
        $activeText.removeClass('active-text');                                           
        });
     }
 });

Answer 1

据我所知，浏览器执行 Javascript 以在每个动画周期更新 DOM 元素的 CSS 属性的速度非常有限。您可以使用 Modernizr 检查 CSS Transitions 支持，并在可用时使用它们，如果不支持则回退到 jQuery 动画。我在许多元素中使用了这种技术并且效果很好 - 原生 CSS 转换比 Javascript 动画更高效(即使没有硬件加速)。

if (Modernizr.csstransitions) {
    // update CSS
}
else {
    // animate CSS
}